概览
时间轴是描述一组资源在一段时间内的使用情况的图表。如果您管理的是软件项目,想要说明谁在何时做什么,或者如果您正在组织会议并且需要安排会议室,时间轴通常是一种合理的可视化选择。一种常见的时间轴是甘特图。
注意:在 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
选项将其移除。
默认情况下,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 列 | |
---|---|---|---|---|---|
目的: | 第 行的标签 | 条形图标签(可选) | 提示(可选) | 启动 | 结尾 |
数据类型: | 字符串 | 字符串 | 字符串 | 数字或日期 | 数字或日期 |
角色: | 数据 | 数据 | 提示 | 数据 | 数据 |
配置选项
名称 | |
---|---|
交替行样式 |
图表是否应按行索引交替背景色(即,已编入索引的行的色调色调较深)。如果为 false,图表背景将采用统一的颜色。如果为 true,则图表背景将按行索引进行着色。(注意:已启用 v51+) 类型:布尔值
默认:true
|
避免过度重叠网格线 |
显示元素(例如,时间轴中的条形)是否应遮盖网格线。如果为 false,网格线可能会完全被显示元素覆盖。如果为 true,则可以更改显示元素,以保持网格线可见。 类型:布尔值
默认:true
|
backgroundColor |
图表主区域的背景颜色。可以是简单的 HTML 颜色字符串(例如 类型:字符串或对象
默认:“白色”
|
颜色 |
用于图表元素的颜色。字符串数组,其中每个元素都是一个 HTML 颜色字符串,例如: 类型:字符串数组
默认:默认颜色
|
启用互动 |
图表是抛出基于用户的事件还是响应用户互动。如果设为 false,则图表不会抛出“select”事件或其他基于互动的事件(但会抛出“ready”或“error”事件),并且不会显示悬停文本或者根据用户输入以其他方式更改。 类型:布尔值
默认:true
|
字体名称 |
图表中所有文本的默认字体。您可以使用特定图表元素的属性来替换此设置。 类型:字符串
默认:“Nearline”
|
字体大小 |
图表中所有文字的默认字体大小(以像素为单位)。您可以使用特定图表元素的属性来替换此设置。 类型:数字
默认:自动
|
forceIFrame |
在内嵌框架内绘制图表。(请注意,在 IE8 中,系统会忽略此选项;所有 IE8 图表都是在 iframe 中绘制的)。 类型:布尔值
默认:false
|
高度 |
图表的高度(以像素为单位)。 类型:数字
默认:包含元素的高度
|
时间轴.barLabelStyle |
一个用于指定条形标签文本样式的对象。其格式如下: {fontName: <string>, fontSize: <string>}
另请参阅此表中的 Type:对象
默认:null
|
timestamp.colorByRowLabel |
如果设置为 true,则使相应行的每个条形都采用相同的颜色。默认对每个条形标签使用一种颜色。 类型:布尔值
默认:false
|
timestamp.groupByRowLabel |
如果设置为 false,则为每个 类型:布尔值
默认:true
|
时间轴行标签样式 |
用于指定行标签文本样式的对象。其格式如下: {color: <string>, fontName: <string>, fontSize: <string>}
Type:对象
默认:null
|
时间线.showBarLabels |
如果设置为 false,则会省略条形图标签。默认设置是显示它们。 类型:布尔值
默认:true
|
时间轴.showRowLabels |
如果设置为 false,则省略行标签。默认设置是显示它们。 类型:布尔值
默认:true
|
时间轴.singleColor |
对所有条形采用相同的颜色。以十六进制值形式指定(例如,“#8d8”)。 类型:字符串
默认:null
|
hint.isHTML |
设置为 注意:气泡图可视化图表不支持通过提示列数据角色自定义 HTML 提示内容。 类型:布尔值
默认:true
|
tooltip.trigger |
使提示显示的用户交互:
类型:字符串
默认:焦点
|
width |
图表的宽度(以像素为单位)。 类型:数字
默认:包含元素的宽度
|
方法
方法 | |
---|---|
draw(data, options) |
绘制图表。图表仅在 返回值类型:无
|
clearChart() |
清除该图表,并释放其分配的所有资源。 返回值类型:无
|
getSelection() |
返回一组选定图表实体。
可选择的实体包括条形、图例条目和类别。
在此图表中,在任何时候都只能选择一个实体。
返回值类型:一组选择元素
|
事件
名称 | |
---|---|
error |
尝试渲染图表出错时触发。 属性:ID、消息
|
onmouseover |
用户将鼠标放在视觉实体上时触发。传递相应数据表元素的行索引和列索引。 柱形与数据表中的单元格、列的图例条目(行索引为 null)以及类别到行的(列索引为 null)相关联。 属性:行、列
|
onmouseout |
在用户离开可见实体时触发。传递相应数据表元素的行索引和列索引。 柱形与数据表中的单元格、列的图例条目(行索引为 null)以及类别到行的(列索引为 null)相关联。 属性:行、列
|
ready |
此图表已准备好进行外部方法调用。如果您想与图表交互,并在绘制后调用方法,则应在调用 属性:无
|
select |
在用户点击视觉实体时触发。如需了解所选内容,请调用 属性:无
|
数据政策
所有代码和数据都会在浏览器中进行处理和呈现。不会向任何服务器发送数据。