甘特图

概览

甘特图是一种图表,用于说明项目细分为组件任务。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 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 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
            }
          }
        };

设置轨道样式

网格样式设置由 innerGridHorizLineinnerGridTrackinnerGridDarkTrack 组合处理。通过仅设置 innerGridTrack,图表会为 innerGridDarkTrack 计算颜色较深的颜色,但如果仅设置 innerGridDarkTrackinnerGridTrack 将会使用默认颜色,并且不会计算颜色较浅的颜色。

      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)

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

返回值类型:无
getSelection()

返回一组选定图表实体。 可选择的实体包括条形、图例条目和类别。 在此图表中,在任何时候都只能选择一个实体。 Extended description

返回值类型:一组选择元素
setSelection()

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

返回值类型:无
clearChart()

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

返回值类型:无

事件

活动 说明
click

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

属性:targetID
error

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

属性:ID、消息
ready

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

属性:无
select

在用户点击视觉实体时触发。如需了解所选内容,请调用 getSelection()

属性:无

数据政策

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