【51CTO.com快譯】在Web開發愛好者，以及那些重視Web應用的高性能與可靠性的大型企業中，React已經廣受歡迎，并得到了廣泛的使用。目前，業界出現了各種復雜程度不一的React組件，它們的功能各不相同。

[[321232]]

本文將重點向您介紹基于React的四種甘特圖解決方案。它們基本上被分為兩種類型。一類是提供基本功能，且適合小型公司的輕量級圖表。另一類則是提供豐富功能，且適用于大型公司和復雜項目的方案。通過此類方案，項目經理能夠確保不會放過任何一個值得重視的細節。下面，我們來具體看看這四種方案。

1. React Google Charts(https://react-google-charts.com/)

React Google Charts是一個包裝器(wrapper)，它可以讓您使用由Google開發的大量圖表。此類甘特圖使用的是SVG(Scalable Vector Graphics，可縮放矢量圖形)渲染。雖然其功能非常基礎，但是您可以據此來獲悉并跟蹤項目的整體狀態，以及各個子任務涉及的一切。Google通過提供此工具，既可以顯示任務的持續時間，又可以展示其開始與結束日期。此外，將鼠標懸停在某個任務上時，您還能夠獲悉一些其他方面的相關信息。根據圖表配置的不同，這些信息可以包括：完成百分比、持續時間、以及用到的資源等。此外，該工具的提示也有助于定義特定的任務是否處在關鍵的路徑上。

通過使用箭頭，它可以顯示不同任務之間的依賴關系。當然，您也可以使用不顯示任何依賴項的模式。同時，其分組功能可以使您將相似的任務組合到一起。“關鍵路徑”是所有甘特圖的必備功能。在此方面，Google可以為您定義那些對于項目時間影響最大的任務。

值得一提的是，Google甘特圖的樣式是可調的，您可以更改那些用來標記任務和軌跡之間依賴關系的箭頭外觀。此外，Google甘特圖也提供了那些創建輕巧、整潔且美觀的圖表所需的幾乎所有功能。總之，如果您想構建一個使用多種不同圖表的Web應用，并使其輕巧且功能齊全的話，那么React Google Charts絕對是您的不二選擇。

2. Frappe Gantt React(https://www.npmjs.com/package/frappe-gantt-react)

Frappe Gantt React也是一個包裝器，它允許用戶使用MIT許可證下的Frappe甘特圖發行版。作為一個簡單輕巧的開源JavaScript甘特圖，它具有拖放、調整大小、創建依賴項、以及時間刻度等功能。您可以用它來創建任務，并將其拖到時間軸上，或通過調整大小來更改持續的時間。通過單擊某項特定的任務，您也可以獲悉諸如：持續時間和當前進度等，某些其他信息。

該方案能夠按照季度、月、周、天、半天，提供查看模式。通過事件監聽器，您可以定義自己的應用將如何針對用戶的某項操作做出何種反應。而通過在彈出窗口中使用自定義的HTML，您也可以修改該工具提示中所顯示的信息格式。目前，該方案對外提供的功能列表較為保守，因此，如果您對甘特圖的功能要求不高的話，則可以使用這款極簡的工具。

在了解了只提供基本功能的甘特圖方案之后，下面我們再來看看兩個能夠滿足苛刻用戶需求的方案。

3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/) 

作為一款功能齊全的甘特圖工具，DHTMLX Gantt能夠實現跨瀏覽器和平臺的應用。它能夠完全自定義各種圖表，其靈活的API也能夠方便每個元素的配置。

您可以自定義從任務欄到網格結構的所有內容。使用其縮放功能，以及在月、日和小時之間靈活的切換，您可以更專注于項目的某個特定部分。鑒于基線對于確保按時完成任務的重要性，您可以使用自定義基線，來標記項目的初始計劃，并將其與項目的當前狀態進行比較。同時，它的自動計劃功能，可以讓您避免手動進行更改，而將所有需要的更改都自動應用于計劃之中。當然，如果任務的結束日期需要跟蹤變更的話，那么此功能也會更新任務的開始日期。

DHTMLX Gantt的資源分配功能可以讓用戶實施各種高級管理功能。您可以在資源使用圖、直方圖和資源日歷的幫助下，為各項任務合理地分配資源，并跟蹤其工作負荷。

上文提到的關鍵路徑方法，不但可以顯著地簡化項目工作，也可以定義確定項目總體工期的任務順序。對此，您可能需要添加一些自定義的內容。例如：通過一個S曲線來顯示項目的進度。除了可以在React項目中使用甘特圖之外，您還可以通過該工具，從與Vue.js、Angular、jQuery、Laravel、Node.js、以及ASP.NET等服務器端技術的集成中受益。

目前，DHTMLX Gantt還在持續迭代改進中，其功能也會越來越豐富。如果您想了解更多其相關信息的話，請訪問該項目的主頁，以及它在GitHub上的demo(https://github.com/DHTMLX/react-gantt-demo)。

4. React Gantt by Bryntum(https://www.react-gantt.com/)

該React甘特圖工具由Bryntum公司開發。該公司以高質量的Ext JS框架插件而聞名。其調度引擎是從頭開始構建的，具有出色的性能，被稱為Chronograph。而它的異步重調度功能則可以處理任意數量的任務。在移動了任務之后，Bryntum會將生成的變更集放到適當的位置，以便用戶跟蹤某個變更是如何輕松地影響到其他變更的。

目前，Bryntum的開發人員已經實現了，用戶在可能進行有效項目管理過程中的所有功能。其中包括：通過拖放支持，允許用戶使用鼠標或觸摸設備，來創建、調整任務窗口的大小;以及以編程的方式，驗證編輯動作，以避免可能出現的錯誤，并確保提供信息的準確性。而可定制的工具提示則允許用戶使用HTML定義，獲悉特定任務的額外詳細信息。

另外，Bryntum內置的可自定義上下文菜單，將有助于實現企業所需的某些特定功能。當然，您也可以在任何條件下，過濾出可用的任務，并更改其顯示的比例。與前面提到的工具類似，Bryntum也提供了關鍵路徑的計算。您可以使用其提前(leads)和滯后(lags)功能，來靈活地管理項目過程，并在任務之間創建各種類型的依賴關系(如：FF、FS、SF、以及SS等)。

通過該工具，您可以只需使用普通CSS，即可輕松地設置所有元素的樣式，自定義行高，動態更改自定義模板，以及設置每個時間線元素的呈現。另外，通過使用PHP、Java、ASP.NET、以及其他技術，開發人員還能夠實現一些服務器與數據庫的集成功能。

原文標題：Top 4 Gantt Chart Solutions for React，作者：Ivan Petrenko

【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】