概览
甘特图是一种图表，可将项目细分到各个组件的任务中。Google 甘特图展示了项目中任务的开始、结束和持续时间，以及任务可能具有的任何依赖关系。Google 甘特图使用 SVG 在浏览器中渲染。与所有 Google 图表一样，当用户将鼠标悬停在数据上时，甘特图会显示提示。
请注意：旧版 Internet Explorer 不支持甘特图。 （IE8 及更低版本不支持 SVG，而甘特图需要该 SVG。）
简单示例
<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>
无依赖项
要创建没有依赖项的甘特图，请确保 DataTable 中每行的最后一个值设置为 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（可选） | 开始 | 结束 | 时长（以毫秒为单位） | 完成百分比 | 依赖项 |
| 数据类型： | string | string | string | date | date | number | number | string |
| 角色： | 网域 | data | data | data | data | data | data | data |
配置选项
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| backgroundColor.fill | string | '白色' [white] | 图表的填充颜色，采用 HTML 颜色字符串的形式。 |
| gantt.arrow | 对象 | null |
对于甘特图，gantt.arrow 用于控制连接任务的箭头的各种属性。 |
| gantt.arrow.angle | number | 45 | 箭头的角度。 |
| gantt.arrow.color | string | “#000” | 箭头的颜色。 |
| gantt.arrow.length | number | 8 | 箭头的长度。 |
| gantt.arrow.radius | number | 15 | 用于定义两个任务之间的箭头曲线的半径。 |
| gantt.arrow.spaceAfter | number | 4 | 箭头的头与箭头所指向的任务之间的空白量。 |
| gantt.arrow.width | number | 1.4 | 箭头的宽度。 |
| gantt.barCornerRadius | number | 2 | 用于定义条形的角曲线的半径。 |
| gantt.barHeight | number | null | 任务栏的高度。 |
| gantt.criticalPathEnabled | boolean | true |
如果设为 true，关键路径上任何箭头的样式将有所不同。
|
| gantt.criticalPathStyle | 对象 | null | 一个对象，包含任何关键路径箭头的样式。 |
| gantt.criticalPathStyle.stroke | string | null | 任何关键路径箭头的颜色。 |
| gantt.criticalPathStyle.strokeWidth | number | 1.4 | 任何关键路径箭头的粗细。 |
| gantt.defaultStartDate | 日期/数字 | null |
如果无法从 DataTable 中的值计算出开始日期，则会将开始日期设置为此日期。接受 date 值 (new Date(YYYY, M, D)) 或数字（要使用的毫秒数）。
|
| gantt.innerGridHorizLine | 对象 | null | 定义内部水平网格线的样式。 |
| gantt.innerGridHorizLine.stroke | string | null | 内部水平网格线的颜色。 |
| gantt.innerGridHorizLine.strokeWidth | number | 1 | 内部水平网格线的宽度。 |
| gantt.innerGridTrack.fill | string | null |
内部网格轨迹的填充颜色。如果未指定 innerGridDarkTrack.fill，则将应用于每个网格轨道。
|
| gantt.innerGridDarkTrack.fill | string | null | 备用的深色内部网格轨道的填充颜色。 |
| gantt.labelMaxWidth | number | 300 | 每个任务标签允许的空间上限。 |
| gantt.labelStyle | 对象 | null |
包含任务标签的样式的对象。 labelStyle: {
fontName: Roboto2,
fontSize: 14,
color: '#757575'
},
|
| gantt.percentEnabled | boolean | true | 根据任务的完成百分比填充任务栏。 |
| gantt.percentStyle.fill | string | null | 任务栏中已完成百分比的部分的颜色。 |
| gantt.shadowEnabled | boolean | true |
如果设置为 true，则会在每个具有依赖项的任务栏下绘制阴影。
|
| gantt.shadowColor | string | “#000” | 定义任何具有依赖项的任务栏下的阴影颜色。 |
| gantt.shadowOffset | number | 1 | 定义具有依赖项的任何任务栏下的阴影偏移量（以像素为单位）。 |
| gantt.sortTasks | boolean | true | 指定任务应以拓扑方式排序（如果为 true）；否则使用与 DataTable 的对应行相同的顺序。 |
| gantt.trackHeight | number | null | 轨道的高度。 |
| 宽度 | number | 所包含元素的宽度 | 图表的宽度（以像素为单位）。 |
| 高度 | number | 所包含元素的高度 | 图表的高度（以像素为单位）。 |
方法
| 方法 | 说明 |
|---|---|
draw(data, options) |
绘制图表。只有在 Return Type（返回类型）：none
|
getSelection() |
返回所选图表实体的数组。
可选的实体包括条形、图例条目和类别。
对于此图表，在任何给定时刻，只能选择一个实体。
返回类型：选择元素数组
|
setSelection() |
选择指定的图表实体。取消之前的所有选择。
可选的实体包括条形、图例条目和类别。
对于此图表，一次只能选择一个实体。
Return Type（返回类型）：none
|
clearChart() |
清除图表，并释放为其分配的所有资源。 Return Type（返回类型）：none
|
事件
| 事件 | 说明 |
|---|---|
click |
当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。 属性：targetID
|
error |
尝试渲染图表时出错时触发。 属性：id、message
|
ready |
该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 属性：无
|
select |
当用户点击视觉实体时触发。如需了解已选择的内容，请调用 属性：无
|
数据政策
所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。