總覽
「甘特圖」是一種圖表，會呈現專案組成部分工作的詳細內容。Google 甘特圖說明專案內工作的開始、結束和持續時間，以及工作可能存在的任何依附元件。Google 甘特圖是使用 SVG 在瀏覽器中呈現。如同所有 Google 圖表，當使用者將遊標懸停在資料上，甘特圖表就會顯示工具提示。
注意：「無法」在舊版 Internet Explorer 中使用甘特圖。(IE8 以下版本不支援 SVG，Gantt Chart 需要)。
簡易範例
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources',
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
沒有依附元件
如要建立沒有依附元件的甘特圖，請確認資料表中每一列的最後一個值已設為 null。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['2014Spring', 'Spring 2014', 'spring',
new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
['2014Summer', 'Summer 2014', 'summer',
new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
['2014Autumn', 'Autumn 2014', 'autumn',
new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
['2014Winter', 'Winter 2014', 'winter',
new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
['2015Spring', 'Spring 2015', 'spring',
new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
['2015Summer', 'Summer 2015', 'summer',
new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
['2015Autumn', 'Autumn 2015', 'autumn',
new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
['2015Winter', 'Winter 2015', 'winter',
new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
['Football', 'Football Season', 'sports',
new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
['Baseball', 'Baseball Season', 'sports',
new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
['Basketball', 'Basketball Season', 'sports',
new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
['Hockey', 'Hockey Season', 'sports',
new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
]);
var options = {
height: 400,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
將資源分組
性質類似的工作可以使用資源歸為一組。在資料中新增 string 類型的資料欄 (在 Task ID 和 Task Name 資料欄後方)，並確認應分組至特定資源的所有工作都具有相同的資源 ID。資源會按照顏色分組。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Research', 'Find sources', null,
new Date(2015, 0, 1), new Date(2015, 0, 5), null, 100, null],
['Write', 'Write paper', 'write',
null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
['Cite', 'Create bibliography', 'write',
null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
['Complete', 'Hand in paper', 'complete',
null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
['Outline', 'Outline paper', 'write',
null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
計算開始/結束/時間長度
甘特圖可接受三個與任務持續時間相關的值：開始日期、結束日期，以及持續時間 (以毫秒為單位)。例如，在沒有開始日期的情況下，圖表可根據結束日期和持續時間來計算缺少的時間。計算結束日期時也是如此。如果同時指定開始和結束日期，系統可就兩者之間的時間長度計算期間。
請參閱下表，瞭解 Gantt 如何在不同情況下處理開始、結束和持續時間的存在。
| 啟動 | 結束 | 課程時長 | 結果 |
|---|---|---|---|
| 顯示簡報 | 顯示簡報 | 顯示簡報 | 確認時間長度與開始/結束時間一致。如果不一致，就會擲回錯誤。 |
| 顯示簡報 | 顯示簡報 | 零值 | 計算從開始與結束時間起算的持續時間。 |
| 顯示簡報 | 零值 | 顯示簡報 | 計算結束時間。 |
| 顯示簡報 | 零值 | 零值 | 擲回無法計算時間長度或結束時間的錯誤。 |
| 零值 | 顯示簡報 | 顯示簡報 | 運算開始時間。 |
| 零值 | 零值 | 顯示簡報 |
根據依附元件計算運算開始時間。搭配 defaultStartDate 使用時，即可只使用時間長度繪製圖表。 |
| 零值 | 顯示簡報 | 零值 | 擲回無法計算開始時間或時間長度的錯誤。 |
| 零值 | 零值 | 零值 | 擲回錯誤，無法計算開始時間、結束時間或時間長度。 |
瞭解上述事項後，您可以建立圖表來規劃一般通勤路線，並只用每項工作的持續時間。
<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load("current", { packages: ["gantt"] });
google.charts.setOnLoadCallback(drawChart);
function toMilliseconds(minutes) {
return minutes * 60 * 1000;
}
function drawChart() {
var otherData = new google.visualization.DataTable();
otherData.addColumn("string", "Task ID");
otherData.addColumn("string", "Task Name");
otherData.addColumn("string", "Resource");
otherData.addColumn("date", "Start");
otherData.addColumn("date", "End");
otherData.addColumn("number", "Duration");
otherData.addColumn("number", "Percent Complete");
otherData.addColumn("string", "Dependencies");
otherData.addRows([
[
"toTrain",
"Walk to train stop",
"walk",
null,
null,
toMilliseconds(5),
100,
null,
],
[
"music",
"Listen to music",
"music",
null,
null,
toMilliseconds(70),
100,
null,
],
[
"wait",
"Wait for train",
"wait",
null,
null,
toMilliseconds(10),
100,
"toTrain",
],
[
"train",
"Train ride",
"train",
null,
null,
toMilliseconds(45),
75,
"wait",
],
[
"toWork",
"Walk to work",
"walk",
null,
null,
toMilliseconds(10),
0,
"train",
],
[
"work",
"Sit down at desk",
null,
null,
null,
toMilliseconds(2),
0,
"toWork",
],
]);
var options = {
height: 275,
gantt: {
defaultStartDate: new Date(2015, 3, 28),
},
};
var chart = new google.visualization.Gantt(
document.getElementById("chart_div")
);
chart.draw(otherData, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
關鍵路徑
甘特圖中的「重要路徑」是直接影響結束日期的路徑或路徑。在 Google 甘特圖中的重要路徑預設為紅色，您可以使用 criticalPathStyle 選項自訂該路徑。您也可以停用重要路徑，只要將 criticalPathEnabled 設為 false 即可。
var options = {
height: 275,
gantt: {
criticalPathEnabled: true,
criticalPathStyle: {
stroke: '#e64a19',
strokeWidth: 5
}
}
};
樣式箭頭
您可以使用 gantt.arrow 選項設定工作之間的依附元件箭頭：
var options = {
height: 275,
gantt: {
criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
arrow: {
angle: 100,
width: 5,
color: 'green',
radius: 0
}
}
};
樣式音軌
格線樣式是由 innerGridHorizLine、innerGridTrack 和 innerGridDarkTrack 的組合處理。只設定 innerGridTrack 時，圖表會為 innerGridDarkTrack 計算較深的顏色，但只設定 innerGridDarkTrack，innerGridTrack 就會使用預設顏色，不會計算較淺的顏色。
var options = {
height: 275,
gantt: {
criticalPathEnabled: false,
innerGridHorizLine: {
stroke: '#ffe0b2',
strokeWidth: 2
},
innerGridTrack: {fill: '#fff3e0'},
innerGridDarkTrack: {fill: '#ffcc80'}
}
};
載入中
google.charts.load 套件名稱為 "gantt"。
google.charts.load("current", {packages: ["gantt"]});
視覺呈現的類別名稱為 google.visualization.Gantt。
var chart = new google.visualization.Gantt(container);
資料格式
列：表格中的每一列都代表一項工作。
資料欄：
| 第 0 欄 | 第 1 欄 | 第 2 欄 | 第 3 欄 | 第 4 欄 | 第 5 欄 | 第 6 欄 | 第 7 欄 | |
|---|---|---|---|---|---|---|---|---|
| 用途： | 工作 ID | 工作名稱 | 資源 ID (選填) | 啟動 | 結束 | 時間長度 (以毫秒為單位) | 已完成百分比 | 依附元件 |
| 資料類型： | 字串 | 字串 | 字串 | 日期 | 日期 | 號碼 | 號碼 | 字串 |
| 角色： | 網域 | 資料 | 資料 | 資料 | 資料 | 資料 | 資料 | 資料 |
設定選項
| 名稱 | 類型 | 預設 | 說明 |
|---|---|---|---|
| backgroundColor.fill | 字串 | 「white」 | 圖表填滿顏色，以 HTML 顏色字串表示。 |
| gantt.arrow | 物件 | null |
在甘特圖中，gantt.arrow 控制了連結任務的箭頭的各種屬性。 |
| gantt.arrow.angle | 號碼 | 45 | 箭頭的頭角。 |
| gantt.arrow.color | 字串 | 「#000」 | 箭頭的顏色。 |
| gantt.arrow.length | 號碼 | 8 | 箭頭的頭長度。 |
| gantt.arrow.radius | 號碼 | 15 | 定義兩個工作之間箭頭曲線的半徑。 |
| gantt.arrow.spaceAfter | 號碼 | 4 | 箭頭的標題與指向的工作之間的空白空間大小。 |
| gantt.arrow.width | 號碼 | 1.4 | 箭頭的寬度。 |
| gantt.barCornerRadius | 號碼 | 2 | 定義長條圓角曲線的半徑。 |
| gantt.barHeight | 號碼 | null | 工作長條的高度。 |
| gantt.criticalPathEnabled | boolean | true |
如果重要路徑上的 true 任何箭頭，樣式就會有所不同。
|
| gantt.criticalPathStyle | 物件 | null | 包含所有重要路徑箭頭樣式的物件。 |
| gantt.criticalPathStyle.stroke | 字串 | null | 任何關鍵路徑箭頭的顏色。 |
| gantt.criticalPathStyle.strokeWidth | 號碼 | 1.4 | 任何關鍵路徑箭頭的粗細。 |
| gantt.defaultStartDate | 日期/數字 | null |
如果無法根據 DataTable 中的值計算開始日期，系統會將開始日期設為這個值。接受 date 值 (new Date(YYYY, M, D)) 或數字，此為使用的毫秒數。 |
| gantt.innerGridHorizLine | 物件 | null | 定義內部水平格線的樣式。 |
| gantt.innerGridHorizLine.stroke | 字串 | null | 內水平格線的顏色。 |
| gantt.innerGridHorizLine.strokeWidth | 號碼 | 1 | 內部水平格線的寬度。 |
| gantt.innerGridTrack.fill | 字串 | null |
內部格線軌跡的填滿顏色。如未指定 innerGridDarkTrack.fill，就會套用至所有格線軌。 |
| gantt.innerGridDarkTrack.fill | 字串 | null | 替代黑色內格軌跡的填滿顏色。 |
| gantt.labelMaxWidth | 號碼 | 300 | 每個工作標籤允許的空間上限。 |
| gantt.labelStyle | 物件 | null |
包含工作標籤樣式的物件。
labelStyle: {
fontName: Roboto2,
fontSize: 14,
color: '#757575'
},
|
| gantt.percentEnabled | boolean | true | 根據工作完成的百分比填入工作列。 |
| gantt.percentStyle.fill | 字串 | null | 工作列的已完成百分比部分顏色。 |
| gantt.shadowEnabled | boolean | true |
如果設為 true，則會在每個具有依附元件的工作列下方繪製陰影。 |
| gantt.shadowColor | 字串 | 「#000」 | 在任何具有依附元件的工作列中，定義陰影顏色。 |
| gantt.shadowOffset | 號碼 | 1 | 定義任何具備依附元件的工作列下陰影的偏移值 (以像素為單位)。 |
| gantt.sortTasks | boolean | true | 指定工作應採用頂端排序 (如果為 true)，否則請使用與 DataTable 的對應資料列相同的順序。 |
| gantt.trackHeight | 號碼 | null | 軌跡的高度。 |
| 寬度 | 號碼 | 所含元素的寬度 | 圖表的寬度，以像素為單位。 |
| 高度 | 號碼 | 所含元素的高度 | 以像素為單位的圖表高度。 |
方法
| 方法 | 說明 |
|---|---|
draw(data, options) |
繪製圖表。只有在觸發 傳回類型：無
|
getSelection() |
傳回所選圖表實體的陣列。
可選取的實體包括長條圖、圖例項目和類別。
在這張圖表中，無論何時都只能選取一個實體。
傳回類型：選取元素的陣列
|
setSelection() |
選取指定的圖表實體。取消先前選取的任何項目。
可選取的實體包括長條圖、圖例項目和類別。
在這張圖表中，一次只能選取一個實體。
傳回類型：無
|
clearChart() |
清除圖表並釋出所有分配的資源。 傳回類型：無
|
事件
| 活動 | 說明 |
|---|---|
click |
使用者點選圖表內時觸發。可用於識別使用者點選標題、資料元素、圖例項目、軸、格線或標籤的時機。 屬性： targetID
|
error |
嘗試算繪圖表時發生錯誤時觸發。 屬性：ID、訊息
|
ready |
圖表已可供外部方法呼叫。如果您想與圖表互動，並在繪製後呼叫方法，您應「先」設定此事件的事件監聽器，並只在事件觸發後才呼叫這些事件。 屬性：無
|
select |
在使用者點選視覺實體時觸發。如要瞭解已選取的項目，請呼叫 屬性：無
|
資料政策
所有程式碼和資料都經過處理並在瀏覽器中顯示。系統不會將任何資料傳送至任何伺服器。