需要在您的 React 應(yīng)用程式中實(shí)現(xiàn)專(zhuān)案管理功能嗎？您很可能已經(jīng)考慮將甘特圖作為一種選擇，因?yàn)槎嗄陙?lái)它一直是專(zhuān)案規(guī)劃的有效工具。

然而，在 React 中實(shí)現(xiàn)自訂的、功能豐富的甘特圖可能具有挑戰(zhàn)性且耗時(shí)。這就是 SVAR 團(tuán)隊(duì)發(fā)布 SVAR React Gantt 的原因，這是一個(gè)開(kāi)源的互動(dòng)式 UI 元件，可為您的 Web 應(yīng)用程式帶來(lái)強(qiáng)大的專(zhuān)案視覺(jué)化。

為什麼還要另一個(gè)甘特圖庫(kù)？

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

無(wú)論您是建立專(zhuān)案管理工具、調(diào)度系統(tǒng)還是任何需要時(shí)間軸視覺(jué)化的應(yīng)用程序，您都可以輕鬆地建立和運(yùn)行具有視覺(jué)吸引力的互動(dòng)式甘特圖。

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

? 核心任務(wù)管理

SVAR React Gantt 元件提供開(kāi)箱即用的基本任務(wù)管理功能。讓您的使用者透過(guò)簡(jiǎn)單的表單建立、編輯和刪除任務(wù)。任務(wù)的持續(xù)時(shí)間和開(kāi)始/結(jié)束日期也可以透過(guò)拖放直接在時(shí)間軸上編輯。

此元件支援三種任務(wù)類(lèi)型：任務(wù)、摘要任務(wù)（根據(jù)子任務(wù)自動(dòng)計(jì)算）和里程碑。每個(gè)任務(wù)欄都以百分比顯示進(jìn)度，使用者可以修改該進(jìn)度。您也可以設(shè)定摘要任務(wù)以自動(dòng)計(jì)算進(jìn)度，同時(shí)考慮所有子任務(wù)。

?? 智能依賴

使用SVAR甘特圖，您可以輕鬆處理任務(wù)關(guān)係。此元件支援各種相依性類(lèi)型：End-to-start、Start-to-start、End-to-end 和 Start-to-end。所有依賴項(xiàng)都可以透過(guò)任務(wù)編輯表單或直接在時(shí)間軸上進(jìn)行管理。

？互動(dòng)式使用者介面功能

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

• 拖放任務(wù)編輯
• 使用者友善的任務(wù)編輯表單
• 視覺(jué)進(jìn)度追蹤
• 網(wǎng)格中的任務(wù)重新排序
• 新增上下文選單和工具列的能力
• 滾動(dòng)縮放

？豐富的客製化

雖然使用者可以透過(guò) UI 控制甘特圖內(nèi)容和佈局，但作為開(kāi)發(fā)人員，您可以完全控制元件的外觀和感覺(jué)，包括：

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

? 可擴(kuò)充的效能

使用 SVAR 甘特圖，即使處理大量任務(wù)和項(xiàng)目，您也可以在效能和回應(yīng)能力方面保持安全。至於處理更新，我們提供了一個(gè)特殊的助手來(lái)簡(jiǎn)化客戶端與伺服器的互動(dòng)。

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

• 高效處理大型資料集
• 動(dòng)態(tài)子任務(wù)載入
• 最佳化渲染
• RestDataProvider 用於無(wú)縫後端整合
• 支援批次更新

開(kāi)始使用

要將 SVAR Gantt 新增至您的項(xiàng)目，請(qǐng)透過(guò) 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} />

要了解更多信息，請(qǐng)查看詳細(xì)的入門(mén)指南。

下一步是什麼？

在您的下一個(gè)專(zhuān)案中嘗試 SVAR 甘特圖！我們很想聽(tīng)聽(tīng)您的回饋並看看您用它建立了什麼。以下是有用資源的列表，可協(xié)助您開(kāi)始建立自己的自訂甘特圖：

• ？ SVAR 甘特圖首頁(yè)
• ？文件
• ？現(xiàn)場(chǎng)演示
• ？論壇

以上是SVAR Gantt：React 的新開(kāi)源互動(dòng)式甘特圖的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！