需要在您的 React 應用程序中實現(xiàn)項目管理功能嗎？您很可能已經(jīng)考慮將甘特圖作為一種選擇，因為多年來它一直是項目規(guī)劃的有效工具。

然而，在 React 中實現(xiàn)自定義的、功能豐富的甘特圖可能具有挑戰(zhàn)性且耗時。這就是 SVAR 團隊發(fā)布 SVAR React Gantt 的原因，這是一個開源的交互式 UI 組件，可為您的 Web 應用程序帶來強大的項目可視化。

為什么還要另一個甘特圖庫？

SVAR 甘特圖是為 React 開發(fā)人員構(gòu)建的。它易于使用、高度可定制，旨在節(jié)省您的開發(fā)時間。它不僅提供了最基本的甘特圖功能，還以超快的性能處理大量數(shù)據(jù)。

無論您是構(gòu)建項目管理工具、調(diào)度系統(tǒng)還是任何需要時間線可視化的應用程序，您都可以輕松地創(chuàng)建和運行具有視覺吸引力的交互式甘特圖。

那么，SVAR React Gantt 的主要功能是什么？

? 核心任務(wù)管理

SVAR React Gantt 組件提供開箱即用的基本任務(wù)管理功能。讓您的用戶通過簡單的表單創(chuàng)建、編輯和刪除任務(wù)。任務(wù)的持續(xù)時間和開始/結(jié)束日期也可以通過拖放直接在時間軸上編輯。

該組件支持三種任務(wù)類型：任務(wù)、摘要任務(wù)（根據(jù)子任務(wù)自動計算）和里程碑。每個任務(wù)欄都以百分比形式顯示進度，用戶可以修改該進度。您還可以設(shè)置摘要任務(wù)以自動計算進度，同時考慮所有子任務(wù)。

?? 智能依賴

使用SVAR甘特圖，您可以輕松處理任務(wù)關(guān)系。該組件支持各種依賴關(guān)系類型：End-to-start、Start-to-start、End-to-end 和 Start-to-end。所有依賴項都可以通過任務(wù)編輯表單或直接在時間軸上進行管理。

？交互式用戶界面功能

SVAR 甘特圖提供了現(xiàn)代化的交互式界面，使用戶可以完全控制任務(wù)。它支持：

• 拖放任務(wù)編輯
• 用戶友好的任務(wù)編輯表單
• 視覺進度跟蹤
• 網(wǎng)格中的任務(wù)重新排序
• 添加上下文菜單和工具欄的能力
• 滾動縮放

？豐富的定制

雖然用戶可以通過 UI 控制甘特圖內(nèi)容和布局，但作為開發(fā)人員，您可以完全控制組件的外觀和感覺，包括：

• 可自定義的任務(wù)欄樣式（形式、顏色、字體）
• 可配置的時間軸尺寸和邊框
• 周末/節(jié)假日亮點
• 任務(wù)欄的自定義工具提示
• 淺色或深色主題選項

? 可擴展的性能

使用 SVAR 甘特圖，即使處理大量任務(wù)和項目，您也可以在性能和響應能力方面保持安全。至于處理更新，我們提供了一個特殊的助手來簡化客戶端與服務(wù)器的交互。

以下是您獲得最佳性能和有效數(shù)據(jù)處理的方法：

• 高效處理大型數(shù)據(jù)集
• 動態(tài)子任務(wù)加載
• 優(yōu)化渲染
• RestDataProvider 用于無縫后端集成
• 支持批量更新

開始使用

要將 SVAR Gantt 添加到您的項目，請通過 npm 安裝它：

npm install wx-react-gantt

然后，將該組件包含在您的 React 文件中：

<script>
    import { Gantt } from "wx-react-gantt";

    const tasks = [
        {
            id: 1,
            start: new Date(2024, 3, 2),
            end: new Date(2024, 3, 17),
            text: "Project planning",
            progress: 30,
            parent: 0,
            type: "summary",
            open: true,
            details: "Outline the project's scope and resources.",
        },
    ];
    const links = [];
    const scales = [
        { unit: "month", step: 1, format: "MMMM yyy" },
        { unit: "day", step: 1, format: "d", css: dayStyle },
    ];
</script>

<Gantt {tasks} {links} {scales} />

要了解更多信息，請查看詳細的入門指南。

下一步是什么？

在您的下一個項目中嘗試 SVAR 甘特圖！我們很想聽聽您的反饋并看看您用它構(gòu)建了什么。以下是有用資源的列表，可幫助您開始構(gòu)建自己的自定義甘特圖：

• ？ SVAR 甘特圖主頁
• ？文檔
• ？現(xiàn)場演示
• ？論壇

以上是SVAR Gantt：React 的新開源交互式甘特圖的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！