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