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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

原文標(biāo)題：Top Gantt Chart Solutions for Angular，作者：Ivan Petrenko

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】