甘特图

概览

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

设置轨道样式

网格样式由 innerGridHorizLineinnerGridTrackinnerGridDarkTrack 组合处理。如果仅设置 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()

属性:无

数据政策

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