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

---

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來制作專業(yè)的JavaScript圖表。

點擊下載FusionCharts最新版

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

甘特圖的基礎(chǔ)

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

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

甘特圖的特征

使用甘特圖，您可以：

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

甘特圖的元素

甘特圖包含以下元素：

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

        流程名稱
  ;      用戶定義的其他數(shù)據(jù)列

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

        甘特任務(wù)欄
        大事記
        任務(wù)連接器
        趨勢線

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

在下面給出的圖像中，您可以看到標(biāo)準(zhǔn)的甘特圖，上面帶有一些上面標(biāo)記的元素：

類別和子類別（日期）

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

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

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

流程名稱

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

進程名稱顯示在甘特窗格左側(cè)的可滾動數(shù)據(jù)表中。

數(shù)據(jù)表以顯示其他數(shù)據(jù)列

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

任務(wù)欄

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

里程碑

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

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

任務(wù)連接器

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

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

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

趨勢線

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

Legend

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

垂直滾動條

垂直滾動條出現(xiàn)在甘特圖中的“甘特”視圖窗格的右側(cè)。

創(chuàng)建一個簡單的甘特圖

甘特圖是一種專用圖，可用于監(jiān)視項目的進度。在本節(jié)中，您將看到如何創(chuàng)建簡單的甘特圖。

例如，請查看如何創(chuàng)建一個甘特圖，以監(jiān)控與優(yōu)化組織在社交媒體上的覆蓋范圍有關(guān)的各種過程和任務(wù)。

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

您構(gòu)建以跟蹤社交媒體優(yōu)化項目進度的甘特圖如下所示：

要創(chuàng)建甘特圖，您需要：

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

要創(chuàng)建社交媒體優(yōu)化甘特圖，請使用下表中提供的數(shù)據(jù)：

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

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

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

---

想要購買FusionCharts Suite XT正版授權(quán)，或了解更多產(chǎn)品信息請點擊