【51CTO.com快譯】在本文中，我們將向您介紹三個不同的可用于創(chuàng)建甘特圖應用程序的Angular組件(相關概念請參見：https://dzone.com/articles/what-is-a-gantt-chart-how-and-when-to-use-a-gantt)。放心，我們并不會在此過于討論技術細節(jié)，而是會從基本功能和配套文檔的角度，和您探討這些圖表的實際用途，以及如何通過它們的文檔頁面，來輕松、快速地滿足基本的業(yè)務需求。

1. angular-gantt(https://www.angular-gantt.com/)

angular-gantt可以讓您將甘特圖表組件添加到當前的AngularJS項目(相關概念請參見：https://dzone.com/articles/angulajs-basic-to-expert-day-one)中。您可以在模型和視圖之間實現(xiàn)雙向的數(shù)據(jù)綁定。它的日歷是可以自定義的，用戶可以定義自己的節(jié)假日和工作時間。其排序和過濾功能也可以高亮地顯示特定的任務與行列。angular-gantt API能夠被用于偵聽控制器中的各類事件和調用方法。當然，其基本功能可以借助插件來進行擴展。目前，此類擴展插件有著十多個。如果需要，您可以添加一個可視化的指示器，來顯示任務的配置進度，或者顯示帶有一些額外信息的工具提示。因此，您可以創(chuàng)建具有基本功能的極簡應用程序，然后按需添加新的功能。您可以通過演示鏈接：https://www.angular-gantt.com/demo/，以了解更多的信息。

angular-gantt的配套文檔雖然并不長，但是足以包含了使用該組件的必需信息。同時，它的入門指南(https://www.angular-gantt.com/get-started/)，也可以引導您進行深入學習。相應的配置指南，則包含并描述了如何將數(shù)據(jù)加載到angular-gantt中，以及如何配置對應的行信息等方面。

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

DHTMLX Gantt Chart既提供了創(chuàng)建在線甘特圖應用程序的所需功能，又為付費用戶提供了一些高級的功能選項。與其他應用程序相比，它的優(yōu)勢是比較明顯的。您可以輕松地使用鼠標來更改任務完成的百分比，并在任務之間創(chuàng)建不同類型的鏈接。關鍵路徑計算可以確保您能夠及時地完成手頭的項目。同時，您可以將諸如：基線或期限等不同類型的自定義元素，添加到對應的甘特圖中。其自動化的調度功能可以免除您各種手動進行的例行工作。此外，您通過向后計劃(Backward planning)，以及對于觸屏設備的支持，從MS Project、Excel或Oracle的Primavera P6進行導出/導入，排序，過濾，動態(tài)加載，以及可訪問性的支持等所有功能，來創(chuàng)建功能強大的項目管理工具。與此同時，它豐富的資源管理功能，各種資源圖，以及有效的工作負載跟蹤都為其增色不少。如果想了解如何將該組件與Angular框架一起使用，您可以從GitHub頁面(https://github.com/DHTMLX/angular2-gantt-demo)，下載對應的演示程序。

DHTMLX Gantt Chart的文檔非常詳盡。例如，您可以查看其進階指南(https://dhtmlx.com/blog/dhtmlx-gantt-chart-usage-angularjs-2-framework/)，來了解如何通過Angular 2 Framework來使用DHTMLX Gantt Chart。該文檔的詳盡之處在于：每個步驟都配備了詳細的描述，并包含了代碼的示例和屏幕的截圖。同時，它也配有詳細甘特圖配置指南，以方便開發(fā)人員針對所有的用戶類型進行全面的考慮。如果您想了解如何在Angular 1.X項目中使用DHTMLX Gantt，那么該方案鏈接也許能夠給您答案(https://dhtmlx.com/blog/gantt-chart-angularjs-app-dhtmlxgantt/)。

3. DayPilot Gantt Chart(https://www.daypilot.org/gantt/)

除了提供事件日歷、月歷、以及計劃程序等不同類型的組件之外，DayPilot也提供了甘特圖服務。由于支持JavaScript、jQuery、AngularJS、PHP、ASP.NET的WebForms、MVC和Java，因此DayPilot Gantt Chart可用于不同類型的項目。

DayPilot對于拖放的支持，可以使您輕松地移動各種任務和里程碑，調整任務的大小，在任務之間創(chuàng)建依賴關系，拖動任務樹，以及讓您通過進度條來監(jiān)視當前的項目進度。通過CSS的可用主題，您可以使用CSS來更改該組件的外觀，讓所有元素都能夠輕松地設置不同的樣式。其導出功能能夠支持PNG、JPG、GIF、BMP、以及TIFF等文件格式。此外，您可以使用在線主題設計器(請參見https://themes.daypilot.org/)來創(chuàng)建自己的主題。當然，您也可以在任務框中自定義活動區(qū)域，然后選擇與之關聯(lián)的各種特定操作。例如：它提供了上下文菜單和處理器(handler)。DayPilot Gantt Chart雖然允許您通過創(chuàng)建HTML工具提示，以顯示附加事件的詳細信息，但是該功能只體現(xiàn)在增值服務列表中。也就是說，除了基本的功能，DayPilot Gantt Chart并不提供關鍵路徑計算、或任何其他高級的功能。您可以通過演示鏈接：https://www.daypilot.org/demo/Gantt/，以了解更多的信息。

由于DayPilot Gantt Chart的文檔看起來有些凌亂，因此您必須花上一些時間，才能找到想要的頁面。例如，針對Angular 2+的教程(請參見：https://doc.daypilot.org/gantt/angular-2/)雖然講得非常詳細，但是其文檔結構卻比較糟糕。當然，如果您對Angular已有全面的了解和足夠的經驗，那么使用該甘特圖應該不是什么問題。

總結

綜上所述，如果您正計劃著將甘特圖添加到Angular項目中，那么可以選擇上述三種方案中的一種。其中，angular-gantt是一款非常輕巧的組件，如果您只想獲得一些基本的功能，它將非常適合您。其插件體系結構允許您按需添加自定義的功能和鉤子(hooks)。由于它獲得了MIT許可證，因此如果您想節(jié)省錢的話，它將是一個不錯的選擇。DHTMLX Gantt Chart可以為您提供關鍵路徑計算、自動規(guī)劃、以及資源管理等高級功能。當然，一切服務都是有代價的，這些組件都僅在其PRO版本中可用。不過，其標準版已經具有了創(chuàng)建功能齊全的甘特圖應用所需的一切。雖然DayPilot Gantt Chart并不具備什么高級功能，但是它仍不失為一種輕量級的可定制解決方案。此外，您可以將其與其他的DayPilot組件(例如事件日歷等)結合使用，以創(chuàng)建復雜的時間管理應用程序。

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

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