甘特图

概览

甘特图是一种图表，可将项目细分到各个组件的任务中。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)

绘制图表。只有在 ready 事件触发后，图表才会接受进一步的方法调用。Extended description。

Return Type（返回类型）：none
getSelection()

返回所选图表实体的数组。 可选的实体包括条形、图例条目和类别。 对于此图表，在任何给定时刻，只能选择一个实体。 Extended description 。

返回类型：选择元素数组
setSelection()

选择指定的图表实体。取消之前的所有选择。 可选的实体包括条形、图例条目和类别。 对于此图表，一次只能选择一个实体。 Extended description 。

Return Type（返回类型）：none
clearChart()

清除图表，并释放为其分配的所有资源。

Return Type（返回类型）：none

事件

事件 说明
click

当用户点击图表内部时触发。可用于识别何时点击标题、数据元素、图例条目、轴、网格线或标签。

属性：targetID
error

尝试渲染图表时出错时触发。

属性：id、message
ready

该图表已准备好进行外部方法调用。如果您想与图表交互并在绘制图表后调用方法，则应在调用 draw 方法之前为该事件设置监听器，并仅在事件触发后调用监听器。

属性：无
select

当用户点击视觉实体时触发。如需了解已选择的内容，请调用 getSelection()。

属性：无

数据政策

所有代码和数据都会在浏览器中处理并呈现。系统不会向任何服务器发送任何数据。