甘特圖

1.1 版本

1.2 應用場景

甘特圖，也稱為橫道圖、條狀圖，是以圖示的方式透過活動列表和時間刻度形象地表示出項目活動順序與持續時間的圖表。

甘特圖橫軸表示時間，縱軸表示活動（項目），線條表示活動在整個時間週期中計劃與實際完成的進度情況，常用於評估當前工作進度或工作計劃的執行情況。

效果如下圖所示：

1.3 圖表特點

• 優點：甘特圖較為簡單直覺，易於普通使用者理解。一般適用於不超過 30 項活動的中小型項目，且無須擔心複雜計算和分析。

• 缺點：甘特圖事實上僅僅部分地反映了項目管理的三重約束（時間、成本和範圍），因為它主要關注進程管理（時間）。

接下來我們將以範例的形式，介紹如何製作甘特圖，以及甘特圖的各項屬性。

更多圖表屬性請參見文檔：圖表資料、圖表樣式、圖表特效。

2.1 準備範本

1）點選設計器左上角「檔案>建立普通報表」。為了使圖表展示效果更好，這裏點選頂部菜單欄「範本> 頁面設定 」將頁面方向調整為「橫向」。

2）下載 Excel 資料：項目計劃進度.xlsx ，將其放在 %FR_HOME%\webapps\webroot\WEB-INF\reportlets 路徑下。

3）建立 檔案資料集 項目計劃進度 。如下圖所示：

2.2 插入圖表

合併一片儲存格區域，點選上方工具欄插入圖表按鈕，插入「甘特圖」。如下圖所示：

2.3 圖表資料

2.3.1 資料項簡介

選中圖表，點選右側屬性面板的「儲存格元素」，點選「資料」，我們可以看到甘特圖資料綁定的配置項分為「甘特圖」和「任務聯動」。如下圖所示：

1）一般情況下，我們僅需要綁定「甘特圖」下的資料項即可。各資料項意義如下：

• 項目名稱：用於展示項目類別或項目階段，支援多個項目展示。

• 系列名：用於綁定項目中的子任務，展示時根據系列決定顏色等。

• 開始時間：項目任務的開始時間。

• 結束時間：項目任務的結束時間。

• 里程碑時間：項目的里程碑時間，可選擇里程碑時間，也可選擇「無」。

• 進度：項目任務的進度。

• 任務ID：項目任務的 ID ，一般情況下選擇「無」即可，當需要設定任務聯動時，則需要綁定任務 ID。

2）當我們需要展示兩個任務之間的聯動關係時，則需要綁定「任務聯動」資料。詳情請參見文檔：關聯線甘特圖 。

• 起始任務id：兩個聯動任務中起始任務的 id。

• 結束任務id：兩個聯動任務中結束任務的 id。

• 聯動型別：兩個任務的聯動型別。

2.3.2 綁定資料

本例綁定資料如下圖所示，項目名稱處綁定了兩個欄位，用於多個項目和項目子任務進行匹配。

注：為了方便已將範本轉為內建資料，資料集為 內建資料集。

2.4 圖表樣式

本例甘特圖最終效果如下圖所示（圖中標註了甘特圖的部分樣式說明）：

接下來將主要介紹甘特圖特有的樣式設定，更多圖表樣式設定請參見文檔：圖表樣式 。

2.4.1 標籤

點選「樣式>標籤」，預設不使用標籤，勾選「使用標籤」後可看到甘特圖示籤配置項，本例中設定如下圖所示：

注：標籤旨在展示任務已完成的部分資料，即標籤位置是依據實際圖形進度去標記的。

如進度為 100%，那麼標籤在圖形上置中，如進度為 0 ，那麼標籤位置對應的則是圖形開始的位置。如下圖所示：

2.4.2 系列

甘特圖系列各配置項如下：

• 配色方案：控制不同系列線條的顏色。系列圖形依據「進度」值分為完成部分和未完成部分，完成部分系列配色不透明度預設100%，未完成部分系列配色不透明度預設50%，不支援設定修改。

• 系列換行：預設「關閉」。開啓後，系列線條顯示的高度會根據項目行高以及系列個數進行重新計算，相較於「關閉」時會變成細線。

• 聯動線：控制聯動線的線型、顏色，當資料綁定了「任務聯動」時，才會顯示。

• 里程碑：控制里程碑的點樣式、顏色等，當資料綁定了「里程碑時間」欄位時，才會顯示。詳情可參見文檔：裏程碑甘特圖 。

• 大數據模式：預設「關閉」，資料量大時可選擇開啓，開啓後會有部分功能受到限制，例如標籤無法顯示。

• 輔助線標識：預設「不顯示」當前時間線，選擇「顯示」後在圖表中會存在一條豎線，滑鼠懸浮時會顯示當前時間

注：11.0.3 版本及之後的設計器中才支援設定「當前時間線」。

本例中，僅修改「當前時間線」為「顯示」，其餘均保持預設設定。如下圖所示：

2.4.3 專案軸

甘特圖專案軸指的是圖表左側表示專案名稱、任務的部分，各配置項如下：

• 橫向佔比：專案軸相對於整個圖表的橫向佔比寬度，預設為「自動」。

• 橫向表頭：可設定橫向表頭的字元樣式、顏色、不透明度。

• 縱向表頭：可設定縱向表頭的字元樣式、顏色、不透明度、位置（對齊方式）。

• 內容：可設定專案軸內容的字元樣式、顏色、不透明度、位置（對齊方式）。

本例中，僅設定縱向表頭和內容的文字位置為「置中」，其餘均保持預設設定。如下圖所示：

2.4.4 時間軸

甘特圖時間軸指的是甘特圖上方表示時間跨度的部分，各配置項如下：

• 時間縮放：預設「開啓」時間縮放，開啓時在圖表右下角有一個時間縮放軸，拖動可調整時間顯示的等級。

• 初始等級：此處可選擇甘特圖時間顯示的初始等級，分為自動及 0~21，預設為「自動」。

• 週末提示：此處可控制甘特圖是否對週末進行提示，預設為「開啓」，當時間等級按天顯示時，週末顯示的顏色會不同。

• 上層表頭：此處可分別設定上層表頭的字元、背景顏色及背景不透明度。

• 下層表頭：此處可分別設定下層表頭的字元、背景顏色及背景不透明度

拖拽甘特圖右下角的等級縮放元件，可以改變時間軸的等級，效果如下圖所示：

本例中，時間軸均保持預設設定。如下圖所示：

「時間軸>狀態設定」中，初始等級與時間顯示的對照關係如下表所示：

2.4.5 背景

甘特圖的背景設定分為「圖表區」和「繪圖區」，如下圖所示：

注：11.0.3 版本及之後的設計器中，才增加了「繪圖區」，支援設定軸邊框和內容邊框。

設定項對應效果如下圖所示：

本例中，「背景」設定項均保持預設即可。

2.5 圖表特效

這裏僅介紹甘特圖在新增條件屬性時的一個特殊屬性。

甘特圖為多項目時，要指定某一個子項目時，項目名稱可寫為「父級項目/子項目」。

例如本例可在條件顯示中使用「項目名稱」等於 字串「項目A/項目A1」。如下圖所示：

2.6 效果預覽

2.6.1 PC 端

儲存範本，點選「分頁預覽」，效果如 2.4 節初始給出的最終效果所示。

2.6.2 行動端

App 端和 HTML5 端均支援，效果如下圖所示：

點選下載範本：甘特圖.cpt