SVAR Gantt：React 的新開源互動式甘特圖

需要在您的 React 應用程式中實現專案管理功能嗎？您很可能已經考慮將甘特圖作為一種選擇，因為多年來它一直是專案規劃的有效工具。

然而，在 React 中實現自訂的、功能豐富的甘特圖可能具有挑戰性且耗時。這就是 SVAR 團隊發布 SVAR React Gantt 的原因，這是一個開源的互動式 UI 元件，可為您的 Web 應用程式帶來強大的專案視覺化。

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

SVAR 甘特圖是為 React 開發人員建構的。它易於使用、高度可自訂，旨在節省您的開發時間。它不僅提供了最基本的甘特圖功能，還以超快的性能處理大量數據。

無論您是建立專案管理工具、調度系統還是任何需要時間軸視覺化的應用程序，您都可以輕鬆地建立和運行具有視覺吸引力的互動式甘特圖。

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

✅ 核心任務管理

SVAR React Gantt 元件提供開箱即用的基本任務管理功能。讓您的使用者透過簡單的表單建立、編輯和刪除任務。任務的持續時間和開始/結束日期也可以透過拖放直接在時間軸上編輯。

此元件支援三種任務類型：任務、摘要任務（根據子任務自動計算）和里程碑。每個任務欄都以百分比顯示進度，使用者可以修改該進度。您也可以設定摘要任務以自動計算進度，同時考慮所有子任務。

➡️ 智能依賴

使用SVAR甘特圖，您可以輕鬆處理任務關係。此元件支援各種相依性類型：End-to-start、Start-to-start、End-to-end 和 Start-to-end。所有依賴項都可以透過任務編輯表單或直接在時間軸上進行管理。

？互動式使用者介面功能

SVAR 甘特圖提供了現代化的互動式介面，使用戶可以完全控制任務。它支援：

• 拖放任務編輯
• 使用者友善的任務編輯表單
• 視覺進度追蹤
• 網格中的任務重新排序
• 新增上下文選單和工具列的能力
• 滾動縮放

？豐富的客製化

雖然使用者可以透過 UI 控制甘特圖內容和佈局，但作為開發人員，您可以完全控制元件的外觀和感覺，包括：

• 可自訂的工作列樣式（形式、顏色、字型）
• 可設定的時間軸尺寸與邊框
• 週末/假日亮點
• 工作列的自訂工具提示
• 淺色或深色主題選項

⚡ 可擴充的效能

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

以下是您獲得最佳效能和有效資料處理的方法：

• 高效處理大型資料集
• 動態子任務載入
• 最佳化渲染
• 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 甘特圖！我們很想聽聽您的回饋並看看您用它建立了什麼。以下是有用資源的列表，可協助您開始建立自己的自訂甘特圖：

• ？ SVAR 甘特圖首頁
• ？文件
• ？現場演示
• ？論壇

以上是SVAR Gantt：React 的新開源互動式甘特圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！