JavaScript圖表工具FusionCharts入門教程(43)：如何創建甘特圖

---

FusionCharts Suite XT是全面的跨平臺、跨瀏覽器JavaScript圖表套包，其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至簡單的HTML頁面。它是你值得信賴的JavaScript圖表解決方案，目前在全球有45萬用戶選擇Fusioncharts來制作專業的JavaScript圖表。

點擊下載FusionCharts最新版

甘特圖是您可以使用的專用圖表，用于顯示各種時間線，例如項目時間線，開發時間線等。

甘特圖的基礎

甘特圖是基于日期/時間的圖表，您可以用它直觀地繪制任務及其確切的開始和結束日期/時間。您還可以定義項目的里程碑，這些里程碑確定在給定的時間點應完成多少項目。這樣，您可以跟蹤項目進度并計劃補救措施，以在出現延遲時使項目恢復正常。

典型的FusionCharts Suite XT Gantt圖表如下所示：

甘特圖的特征

使用甘特圖，您可以：

• 同時顯示日期和時間。
• 在可視時間軸上使用具有多個且不規則的日期劃分的數據。您還可以自定義類別的標簽和外觀屬性。
• 自定義輸入和輸出日期格式。這樣，您可以以一種格式在JSON中提供日期，然后自定義輸出格式。此外，您可以在輸出中廣泛定制日期格式。
• 以百分比顯示每個任務的完成情況，可以顯示為空白欄，也可以使用其他填充顏色（可以使用屬性定義slackFillColor）。
• 在圖表的側面顯示可滾動的數據表。您可以在此表中創建任意數量的列，并顯示所需的任何數據。您還可以自定義此表的每個單元格的外觀。
• 將甘特圖視圖窗格區域限制為指定的日期/持續時間。您可以通過滾動圖表查看其余部分。
• 通過ID將任務鏈接到流程。因此，您可以為每個進程定義多個任務。如果您繪制甘特圖以指示所有團隊成員的已分配工作，并且每個成員在同一時期內分配了多個工作，則這將很有幫助。
• 顯示/隱藏任務標簽，百分比標簽，單個任務欄日期等。
• 將各個任務欄顯示為組-指示任務組。
• 自定義連接器以連接圖表上的任何兩個任務。連接器可以連接到兩個任務的開始或結束，并且可以四種不同的方式呈現。您還可以分別自定義每個連接器的外觀。
• 在指定日期顯示里程碑，顯示為具有可自定義屬性的多邊形或星形。您也可以顯示里程碑的其他工具文本。
• 在圖表中添加趨勢線或趨勢區域，以突出顯示單個日期或日期范圍。例如，您可以添加一條趨勢線以顯示“今天”，也可以添加一條趨勢線以顯示“假日”，等等。
• 自定義工具提示屬性。另外，您可以將任務日期顯示為工具提示文本的一部分，或使用其他宏來創建動態工具提示。
• 在圖表中添加圖例以顯示顏色鍵，并完全自定義圖例化妝品。
• 使用預定義的調色板和單色主題選擇器為圖表設置顏色。
• 定義要在其中分布數據表和甘特圖區域的寬度比率。
• 完全自定義甘特和網格化妝品，以及其他設置，例如滾動屬性。
• 顯示圓形任務欄。
• 自定義任務欄的漸變混合和陰影效果。
• 在甘特圖上定義注釋以顯示更多信息。
• 啟用懸停效果，并為類別，流程，連接器和任務欄自定義懸停屬性。
• 啟用垂直滾動。

甘特圖的元素

甘特圖包含以下元素：

• 視覺時間軸中的類別和子類別（日期）
• 可滾動的數據表，其中包括：

        流程名稱
        用戶定義的其他數據列

• 可滾動的甘特視圖窗格，其中包括：

        甘特任務欄
        大事記
        任務連接器
        趨勢線

• 圖例以顯示圖表中使用的顏色鍵

在下面給出的圖像中，您可以看到標準的甘特圖，上面帶有一些上面標記的元素：

類別和子類別（日期）

甘特圖的橫軸表示項目的總時間跨度。您可以將此軸分解為增量（例如，天，周或月）。您還可以定義任意數量的子類別，以顯示分解成較小單位的日期。例如，如果要顯示跨越兩年的甘特圖，則可以將第一個子類別顯示為季度，然后將這些季度劃分為幾個月，幾周，最后為幾天。

時間線的不規則分布也是可能的。例如，如果要繪制一個甘特圖來說明某個項目在三個月時間內的發展情況，并且想要顯示每周的進度，則可以根據其實際日期輕松地將時間段劃分為幾周。在可視日期時間軸中，頂部的欄可以用名稱表示月份，而下方的欄可以顯示星期。

在大多數其他甘特圖中，您被迫將一個月分為四個星期，從而導致可視數據顯示出現異常，因為一個月始終超過4個星期。但是，FusionCharts Suite XT Gantt圖表是基于日期的，這意味著您所有的日期劃分都是完美的。您可以顯示從一個月開始到另一個月結束的一周。

流程名稱

甘特圖中的每個任務都表示為一個過程。例如，在上面顯示的圖像中，我們具有“書寫”，“簽名”，“財務”等過程。無論何時構建甘特圖，都需要指定過程名稱以及每個過程中的任務。

進程名稱顯示在甘特窗格左側的可滾動數據表中。

數據表以顯示其他數據列

如果需要提供與每個過程相關的更多數據，則可以在交互式且可完全自定義的數據表中顯示該數據。該數據表是可拖動和滾動的。而且，每個單元格的化妝品都可以進行完全自定義，并且每個單元格中的數據都可以鏈接到外部目標。

任務欄

任務欄是代表每個任務持續時間的實際欄。它們貫穿圖表的水平長度，并相對于為每個圖表指定的日期進行定位。

里程碑

里程碑是甘特圖的重要組成部分，因為它們使您可以在圖表上直觀地描繪任何關鍵日期。您可以基于日期和任務在圖表上創建自己的里程碑，即，對于給定的任務，您可以指定特定日期的里程碑。您可以自定義里程碑的所有視覺屬性，包括形狀（星形或多邊形），大小和顏色。

此外，您可以添加工具文本并鏈接到該里程碑。

任務連接器

您可以在任務欄之間繪制連接器以指示流程。

在功能方面，要繪制連接器，您需要做的就是Id為要連接的兩個任務指定屬性。除此之外，您還可以指定連接器在開始或結束處分別連接開始和結束任務欄的位置。

例如，如果您需要繪制兩個本質上是同時發生的連接任務，即每個進程在同一時間啟動并且關聯相同的事物，則可以將任務欄的起點連接到結束欄的起點以顯示影響。同樣，如果第二個進程只能在第一個進程結束后才能開始，則可以將第一個任務欄的末尾連接到后續任務欄的開頭。

趨勢線

您可以使用趨勢線在圖表上顯示重要日期，例如今天或預定日期等。

Legend

您可以為圖表定義自己的圖例和鍵。這是一項可選要求，但對于描述每種顏色表示的內容很有用。

垂直滾動條

垂直滾動條出現在甘特圖中的“甘特”視圖窗格的右側。

創建一個簡單的甘特圖

甘特圖是一種專用圖，可用于監視項目的進度。在本節中，您將看到如何創建簡單的甘特圖。

例如，請查看如何創建一個甘特圖，以監控與優化組織在社交媒體上的覆蓋范圍有關的各種過程和任務。

為了使甘特圖，包括與.js文件的其余部分項目文件夾fusioncharts.Gantt.js。

您構建以跟蹤社交媒體優化項目進度的甘特圖如下所示：

要創建甘特圖，您需要：

1. 使用甘特圖定義要繪制的數據
2. 定義圖表的可視時間線
3. 定義流程
4. 定義任務

要創建社交媒體優化甘特圖，請使用下表中提供的數據：

在上表中，您可以查看涉及的各個過程，以及每個過程的開始和結束日期。

上面顯示的甘特圖跟蹤每個過程的每月進度。這里的每個月代表一個類別。假設您要同時監視季度和每月進度。在這種情況下，您將不得不用兩種類別來呈現圖表-一種用于月份，另一種用于季度。

具有多個類別的“社交媒體優化甘特圖”圖表如下所示：

---

想要購買FusionCharts Suite XT正版授權，或了解更多產品信息請點擊