您的位置：首页 > 编程语言 > Go语言

Google Charts -- Timelines 使用说明

2016-07-25 10:07 567 查看

概述

时间轴是一种描述一组数据随时间变化的图标。如果你在管理一个软件项目，想要标明谁在什么时候做什么任务，或者你在组织一场会议需要定会议室，时间轴是一个合理的图形化选择。一种出名的时间轴就是--甘特图。

注意：在JS的时间对象中，月份是从0到11，其中，一月是0，12月是11.如果你的时间轴错移了一个月，这可能是最大的原因。

一个简单的例子

假设你想画一个美国总统什么时候执政的图标。这时，“数据源”是总统，我们可以把每个总统的执政时间画成柱状图：

悬停在条上会显示更详细的标签信息。

在载入timeline包和定义画图标的回调函数之后，drawChart()方法说明了一个google.visualization.Timeline()函数，然后一个总统一行填充dataTable。

在dataTable里，第一列是总统的名字，第二列和第三列是开始时间和结束时间。它们是JS的Date类型，它们也可能是空白数字。

最后，我们调用图形的draw()方法，它在div里用相同的id（#timeline）展示，它的container在drawChart()的第一行声明。

<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 Charts的时间轴是可定制的，在下面的例子中我们会展示一些常用的方法使你的时间轴适合。

给柱状图打标签

除了行标签 ("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>

我们上面的行标签不是很明显，所以用timeline的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>

一个高级的例子

为了让我们的时间轴更复杂，让我们给图标上加上副总统和州长。John Adams在他成为总统之前是副总统，Thomas 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('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 Charts为了美感和清晰可见选择理想的颜色。你可以用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

被设置成一个16进制数来给条目设定浅绿色：

<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>

如果你想要用不同的颜色控制不同的条目，使用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.4');
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.4" style="height: 150px;"></div>

如果你的图表比列表中需要更多的颜色，图标会表现为singleColor被设置为列表中的第一个颜色。 (这个在Google Charts试默认为true的, 不仅仅是时间轴。)

改变字体

你可以用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 Charts 对条目的终点设置了小的调整来避免遮蔽时间轴网格线。为了阻止这种行为，可以把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>

定制提示框

你可以通过给五列的datatable增加一个标签列来定制用户悬停在时间轴条目上看到的内容。为了提供非默认的提示框，你的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':['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);

数据格式

行：表格中的每行代表一个时间轴条目

列：

	Column 0	Column 1	Column 2	Column 3	Column 4
Purpose:	Row label	Bar label (optional)	Tooltip (optional)	Start	End
Data Type:	string	string	string	number or date	number or date
Role:	data	data	tooltip	data	data

配置选项

Name
avoidOverlappingGridLines	Whether display elements (e.g., the bars in a timeline) should obscure grid lines. If false, grid lines may be covered completely by display elements. If true, display elements may be altered to keep grid lines visible. Type: boolean Default: true
backgroundColor	The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00' , or an object with the following properties. Type: string or object Default: 'white'
colors	The colors to use for the chart elements. An array of strings, where each element is an HTML color string, for example: colors:['red','#004411'] . Type: Array of strings Default: default colors
enableInteractivity	Whether the chart throws user-based events or reacts to user interaction. If false, the chart will not throw 'select' or other interaction-based events (but will throw ready or error events), and will not display hovertext or otherwise change depending on user input. Type: boolean Default: true
fontName	The default font face for all text in the chart. You can override this using properties for specific chart elements. Type: string Default: 'Arial'
fontSize	The default font size, in pixels, of all text in the chart. You can override this using properties for specific chart elements. Type: number Default: automatic
forceIFrame	Draws the chart inside an inline frame. (Note that on IE8, this option is ignored; all IE8 charts are drawn in i-frames.) Type: boolean Default: false
height	Height of the chart, in pixels. Type: number Default: height of the containing element
timeline.barLabelStyle	An object that specifies the bar label text style. It has this format: {fontName: <string>, fontSize: <string>} Also see fontName and fontSize in this table. Type: object Default: null
timeline.colorByRowLabel	If set to true, colors every bar on the row the same. The default is to use one color per bar label. Type: boolean Default: false
timeline.groupByRowLabel	If set to false, creates one row for every dataTable entry. The default is to collect bars with the same row label into one row. Type: boolean Default: true
timeline.rowLabelStyle	An object that specifies the row label text style. It has this format: {color: <string>, fontName: <string>, fontSize: <string>} The color can be any HTML color string, for example 'red' or '#00cc00' Also see fontName and fontSize in this table. Type: object Default: null
timeline.showBarLabels	If set to false, omits bar labels. The default is to show them. Type: boolean Default: true
timeline.showRowLabels	If set to false, omits row labels. The default is to show them. Type: boolean Default: true
timeline.singleColor	Colors all bars the same. Specified as a hex value (e.g., '#8d8'). Type: string Default: null
tooltip.isHtml	Set to false to use SVG-rendered (rather than HTML-rendered) tooltips. See Customizing Tooltip Content for more details. Note: customization of the HTML tooltip content via the tooltip column data role is notsupported by the Bubble Chart visualization. Type: boolean Default: true
tooltip.trigger	The user interaction that causes the tooltip to be displayed: 'focus' - The tooltip will be displayed when the user hovers over the element. 'none' - The tooltip will not be displayed. Type: string Default: 'focus'
width	Width of the chart, in pixels. Type: number Default: width of the containing element

方法

Method
draw(data, options)	Draws the chart. The chart accepts further method calls only after the ready event is fired. Extended description . Return Type: none
clearChart()	Clears the chart, and releases all of its allocated resources. Return Type: none
getSelection()	Returns an array of the selected chart entities. Selectable entities are bars, legend entries and categories. For this chart, only one entity can be selected at any given moment. Extended description . Return Type: Array of selection elements

事件

Name
error	Fired when an error occurs when attempting to render the chart. Properties: id, message
onmouseover	Fired when the user mouses over a visual entity. Passes back the row and column indices of the corresponding data table element. A bar correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column
onmouseout	Fired when the user mouses away from a visual entity. Passes back the row and column indices of the corresponding data table element. A bar correlates to a cell in the data table, a legend entry to a column (row index is null), and a category to a row (column index is null). Properties: row, column
ready	The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired. Properties: none
select	Fired when the user clicks a visual entity. To learn what has been selected, call getSelection() . Properties: none

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 谷歌图形数据 javascript

相关文章推荐

新的分享

章节导航