时间表

概览

时间轴是描述一组资源在一段时间内的使用情况的图表。如果您管理的是软件项目,想要说明谁在何时做什么,或者如果您正在组织会议并且需要安排会议室,时间轴通常是一种合理的可视化选择。一种常见的时间轴是甘特图

注意:在 JavaScript 日期对象中,月份的索引从 0 开始,持续到 11,其中 1 月代表 0 月,12 月代表 11 月。如果您的时间表延迟一个月,很可能是因为此原因。如需了解详情,请参阅日期和时间页面。

简单示例

假设您想要绘制美国总统的宣传活动条款在这里,“资源”是总统,我们可以用条形表示每位总统的任期:

将鼠标悬停在某个柱形上时,系统会显示一个包含更多详细信息的提示。

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

dataTable 内,第一列是总统的姓名,第二列和第三列是开始时间和结束时间。这些类型具有 JavaScript Date 类型,但也可以是普通的数字。

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

<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 图表时间轴是可自定义的,在以下示例中,我们将向您介绍一些自定义时间轴外观的常见方法。

为柱形加标签

除了行标签(如上面的“华盛顿”、“亚当”、“杰斐逊”)之外,您还可以为各个条加标签。在这里,我们将行标签更改为简单的数字,并将每位总统的名字都放到他的栏中。

在代码中,我们在数据中插入了一个新列以保存条形图标签:每位总统的全名。当时间轴 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 选项将其移除。

默认情况下,showRowLabelstrue。将其设置为 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 图表会选择针对美学和可读性(包括有视觉障碍的用户)优化的颜色。您可以使用 colorByRowLabelsingleColorbackgroundColorcolors 选项定制默认行为。

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 列
目的: 第 行的标签 条形图标签(可选) 提示(可选) 启动 结尾
数据类型: 字符串 字符串 字符串 数字或日期 数字或日期
角色: 数据 数据 提示 数据 数据

 

配置选项

名称
交替行样式

图表是否应按行索引交替背景色(即,已编入索引的行的色调色调较深)。如果为 false,图表背景将采用统一的颜色。如果为 true,则图表背景将按行索引进行着色。(注意:已启用 v51+)

类型:布尔值
默认:true
避免过度重叠网格线

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

类型:布尔值
默认:true
backgroundColor

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

类型:字符串或对象
默认:“白色”
颜色

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

类型:字符串数组
默认:默认颜色
启用互动

图表是抛出基于用户的事件还是响应用户互动。如果设为 false,则图表不会抛出“select”事件或其他基于互动的事件(但会抛出“ready”或“error”事件),并且不会显示悬停文本或者根据用户输入以其他方式更改。

类型:布尔值
默认:true
字体名称

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

类型:字符串
默认:“Nearline”
字体大小

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

类型:数字
默认:自动
forceIFrame

在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。

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

图表的高度(以像素为单位)。

类型:数字
默认:包含元素的高度
时间轴.barLabelStyle

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

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

另请参阅此表中的 fontNamefontSize

Type:对象
默认:null
timestamp.colorByRowLabel

如果设置为 true,则使相应行的每个条形都采用相同的颜色。默认对每个条形标签使用一种颜色。

类型:布尔值
默认:false
timestamp.groupByRowLabel

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

类型:布尔值
默认:true
时间轴行标签样式

用于指定行标签文本样式的对象。其格式如下:

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

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

Type:对象
默认:null
时间线.showBarLabels

如果设置为 false,则会省略条形图标签。默认设置是显示它们。

类型:布尔值
默认:true
时间轴.showRowLabels

如果设置为 false,则省略行标签。默认设置是显示它们。

类型:布尔值
默认:true
时间轴.singleColor

对所有条形采用相同的颜色。以十六进制值形式指定(例如,“#8d8”)。

类型:字符串
默认:null
hint.isHTML

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

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

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

使提示显示的用户交互:

  • “focus”:用户将鼠标悬停在元素上时,系统会显示提示。
  • “none”- 提示将不会显示。
类型:字符串
默认:焦点
width

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

类型:数字
默认:包含元素的宽度

方法

方法
draw(data, options)

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

返回值类型:无
clearChart()

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

返回值类型:无
getSelection()

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

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

事件

名称
error

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

属性:ID、消息
onmouseover

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

属性:行、列
onmouseout

在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 柱形与数据表中的单元格、列的图例条目(行索引为 null)以及类别到行的(列索引为 null)相关联。

属性:行、列
ready

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

属性:无
select

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

属性:无

数据政策

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