时间表

  1. Overview
  2. 简单示例
  3. 为条形添加标签
  4. 高级示例
  5. 各横线各占一行
  6. 更改字体
  7. 控制颜色
  8. 网格线重叠
  9. 自定义提示
  10. 正在加载
  11. 数据格式
  12. 配置选项
  13. 方法
  14. 事件
  15. 数据政策

概览

时间轴是一种图表，描绘了一组资源在一段时间内的使用情况。如果您正在管理一个软件项目，并希望说明谁在何时做什么，或者如果您要组织会议并需要安排会议室，那么时间轴通常是合理的可视化选择。一种热门的时间轴类型是甘特图。

注意：在 JavaScript 日期对象中，月份从零开始编入索引，一直到十一个月，其中 1 月是第 0 个月，十二月是第 11 个月。如果您的时间轴看起来相差一个月，这很可能就是原因所在。如需了解详情，请参阅日期和时间页面。

简单示例

假设您想要绘制美国总统任期的图表。在这里，“资源”表示总统，我们可以将每位总统的任期绘制为一个柱形：

将鼠标悬停在条形图上，即可看到一个包含更多详细信息的提示。

加载 timeline 软件包并定义回调以在页面渲染时绘制图表后，drawChart() 方法会实例化 google.visualization.Timeline()，然后为 dataTable 填充一行，其中每个总统都占一行。

在 dataTable 中，第一列是总统的名字，第二列和第三列是开始时间和结束时间。它们的类型为 JavaScript Date 类型，但也可以是纯数字。

最后，我们调用图表的 draw() 方法，该方法会使用在 drawChart() 的第一行声明 container 时使用的相同标识符 (timeline) 的 div 内显示图表。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

Google 图表时间轴是可自定义的，在下面的示例中，我们将向您展示调整时间轴外观的一些常见方法。

为条形添加标签

除了行标签（上面的“Washington”“Adams”和“Jefferson”）之外，您还可以标记各个条形。在这里，我们将行标签更改为简单的数字，并将每位总统的名字放在竖条上。

在此代码中，我们在数据中插入了一个新列来保存柱形标签：每位总统的全名。如果时间轴 dataTable 中有四列，第一列会被解释为行标签，第二列会被解释为条形标签，第三列和第四列会被解释为起始和结束标签。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

上面新的行标签没有什么参考价值，所以让我们使用时间轴 showRowLabels 选项移除这些标签。

默认情况下，showRowLabels 为 true。将其设置为 false 会移除行标签：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

高级示例

为了让我们的时间表更加复杂，我们在图表中添加副总统和国务卿。约翰·亚当斯在担任总统之前曾是副总统，托马斯·杰斐逊先后担任国务卿、后副总统，最后才是总统。

在时间轴中，即使某项资源显示在多行中，该资源也将具有相同的颜色，因此在下表中，每个人用一致的颜色表示。

某些国务卿在很短的时间内任职，因此此图表是很好的标签测试。如果标签对于条形而言太大，则根据条形的大小将其简写或消除。用户可以随时将鼠标悬停在此条形图上以获取提示信息。

时间轴将按顺序摆放各行（总统、副总统、国务卿），因为这些行在以下代码中的显示顺序如下。不过，条形的布局仅由开始和结束时间决定，因此在 dataTable 中调换两位国务卿或两位总统对图表没有影响。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

逐行显示柱形

与教皇不同，每次只能有一位美国总统，因此，如果我们将所有行都标记为“总统”，时间轴会将我们第一张图表的三行合并成一行，以使演示文稿更加简洁。您可以使用 groupByRowLabel 选项控制此行为。

以下是默认行为：

现在，我们将 groupByRowLabel 设置为 false，并将一行拆分成三部分：

关闭分组的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

控制颜色

默认情况下，Google 图表会选择针对美观性和可读性进行了优化的颜色（包括有视觉障碍的用户）。您可以使用 colorByRowLabel、singleColor、backgroundColor 和 colors 选项定制默认行为。

colorByRowLabel 选项将对同一行上的所有条形颜色设置相同。当竖条之间存在间隙时，这会是个不错的选择。

colorByRowLabel 默认为 false，因此我们在这里替换该值并将其设置为 true。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

如果您希望所有条形（无论位于哪一行）都采用相同的颜色，请使用 singleColor 选项：

在以下代码中，singleColor 设置为十六进制值，将所有条形颜色设置为浅绿色：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

您可以使用 backgroundColor 选项控制行的背景颜色：

backgroundColor 指定为十六进制值。在这里，我们将其与 colorByRowLabel 配对，以在会议中显示曲目：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

然后，如需将背景颜色设为按行索引交替或非交替，请使用 alternatingRowStyle 选项（在 v51 及更高版本中有效）：

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

如果要控制各个条形的颜色，请使用 colors 选项：

colors 接受一个十六进制值数组，这些值将按顺序应用到各条形：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

如果您的图表需要的颜色超出所列颜色，则图表将表现得就像 singleColor 设置为列表中的第一种颜色一样。（此规则适用于所有 Google 图表，而不仅仅是时间轴。）

如需控制各个条形的颜色，另一种方法是使用具有样式角色的列。

用于添加和填充样式列的代码：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

更改字体

您可以使用 rowLabelStyle 为每行的标签选择字体和字体，使用 barLabelStyle 为每个条形上的标签选择字体和字体。下面对两者进行了演示。

注意：请务必选择用户浏览器能够呈现的字体。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

您无法设置barLabel文字的颜色。

网格线重叠

Google 图表会对条形端点进行细微调整，以免遮挡时间轴网格线。为防止出现这种行为，请将 avoidOverlappingGridLines 选项设置为 false。

为了说明这种效果，下面我们来看两个示例，第一个有重叠的网格线，第二个没有。

以下是与网格线重叠的代码：

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

自定义提示

通过向包含五列的数据表添加提示列，您可以自定义用户将鼠标悬停在时间轴上的条形上时会看到的内容。如需提供非默认提示，数据表中的每一行都必须包含全部五列（行标签、条形标签、提示、起始和结束）：

将鼠标悬停在某个条形上，即会显示一个提示，其中包含第三列中定义的文本。在此图表中，我们必须将第二列设置为虚拟值（此处为 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':['timeline']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

正在加载

google.charts.load 软件包名称为 timeline： 

  google.charts.load("current", {packages: ["timeline"]});

该可视化图表的类名称为 google.visualization.Timeline： 

  var visualization = new google.visualization.Timeline(container);

数据格式

行：表格中的每一行代表一个时间轴栏。

列：

  第 0 列 第 1 列 第 2 列 第 3 列 第 4 列
用途： 行标签 条形标签（可选） 提示（可选） 开始 结束
数据类型： string string string 数字或日期 数字或日期
角色： data data 提示 data data

 

配置选项

名称
alternatingRowStyle

图表是否应按行索引交替显示背景颜色（即，将偶数索引行的背景颜色设置为较深的色调）。如果为 false，图表背景将采用一种统一的颜色。如果为 true，图表背景将按行索引交替进行色调调节。（注意：适用于 v51 及更高版本）

类型：布尔值
默认值：true
avoidOverlappingGridLines

显示元素（例如时间轴中的条形）是否应遮盖网格线。如果为 false，网格线可能会被显示元素完全覆盖。如果为 true，则可以更改显示元素，使网格线保持可见。

类型：布尔值
默认值：true
backgroundColor

图表主要区域的背景颜色。可以是简单的 HTML 颜色字符串（例如 'red' 或 '#00cc00'），也可以是具有以下属性的对象。

类型：字符串或对象
默认：“white”
颜色

用于图表元素的颜色。字符串数组，其中每个元素都是一个 HTML 颜色字符串，例如：colors:['red','#004411']。

类型：字符串数组
默认：默认颜色
enableInteractivity

图表是抛出基于用户的事件，还是对用户互动做出响应。如果为 false，则图表不会抛出“select”或其他基于互动的事件（但会抛出 ready 事件或 error 事件），也不会显示悬停文本或根据用户输入进行其他更改。

类型：布尔值
默认值：true
fontName

图表中所有文字的默认字体。您可以使用特定图表元素的属性替换此设置。

类型：字符串
默认：“Arial”
fontSize

图表中所有文字的默认字体大小（以像素为单位）。您可以使用特定图表元素的属性替换此设置。

类型：数字
默认：自动
forceIFrame

在内嵌框架内绘制图表。（请注意，在 IE8 上，此选项会被忽略；所有 IE8 图表都是在 iframe 中绘制的。）

类型：布尔值
默认值：false
高度

图表的高度（以像素为单位）。

类型：数字
默认值：所包含元素的高度
timeline.barLabelStyle

一个对象，用于指定条形标签文本样式。其格式如下：

{fontName: <string>, fontSize: <string>}

另请参阅此表中的 fontName 和 fontSize。

类型：object
默认值：null
timeline.colorByRowLabel

如果设置为 true，则会将行中的每个条形都设置为相同的颜色。默认设置是每个条形标签使用一种颜色。

类型：布尔值
默认值：false
timeline.groupByRowLabel

如果设置为 false，则会为每个 dataTable 条目创建一行。默认设置是将具有相同行标签的条收集到一行中。

类型：布尔值
默认值：true
timeline.rowLabelStyle

一个对象，用于指定行标签文本样式。其格式如下：

{color: <string>, fontName: <string>, fontSize: <string>}

color 可以是任何 HTML 颜色字符串，例如 'red' 或 '#00cc00'。另请参阅此表格中的 fontName 和 fontSize。

类型：object
默认值：null
timeline.showBarLabels

如果设置为 false，则忽略条形标签。默认情况下，系统会显示这些消息。

类型：布尔值
默认值：true
timeline.showRowLabels

如果设置为 false，则忽略行标签。默认情况下，系统会显示这些消息。

类型：布尔值
默认值：true
timeline.singleColor

将所有条形设置为相同的颜色。以十六进制值（例如“#8d8”）。

类型：字符串
默认值：null
tooltip.isHtml

设置为 false 可使用 SVG 渲染（而非 HTML 渲染）的提示。如需了解详情，请参阅 自定义提示内容 。

注意：气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。

类型：布尔值
默认值：true
tooltip.trigger

导致显示提示的用户互动：

  • “focus”- 用户将鼠标悬停在元素上时将显示提示。
  • “none”- 不会显示提示。
类型：字符串
默认：“focus”
宽度

图表的宽度，以像素为单位。

类型：数字
默认值：所包含元素的宽度

方法

方法
draw(data, options)

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

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

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

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

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

返回类型：选择元素数组

事件

名称
error

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

属性：id、message
onmouseover

用户将鼠标悬停在视觉实体上时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目（行索引为 null）以及与行关联的类别（列索引为 null）。

属性：行、列
onmouseout

用户将鼠标远离视觉实体时触发。传回相应数据表元素的行和列索引。 条形与数据表中的单元格、列的图例条目（行索引为 null）以及与行关联的类别（列索引为 null）。

属性：行、列
ready

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

属性：无
select

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

属性：无

数据政策

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