javascript - 如何设置Google图表的事件?

  显示原文与译文双语对照的内容
0 0

你好,我使用 Google API绘制图表,但是我想为这个 table 设置事件,但我不知道如何收集这个元素,例如我想在的房间
Google图表链接:
Google时间线图表
以下是 google javascript图表代码:

 <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
 'version':'1','packages':['timeline']}]}"></script>
 <script type="text/javascript">
 google.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,21,30,0), new Date(0,0,1,0,30,0) ]]);
 var options = {
 timeline: { colorByRowLabel: true },
 backgroundColor: '#ffd'
 };
 chart.draw(dataTable, options);
 }
</script>

还有我的html:

<!DOCTYPE html>
<html>
 <head>
 <title>sample</title>
 </head>
 <body>
 <div id="example5.3" style="width: 900px; height: 200px;"></div>
 </body>
</html>

有什么方法可以为他们设定一个事件?

时间:原作者:1个回答

0 0

你可以使用"选择"事件处理程序执行以下操作:

google.visualization.events.addListener(chart, 'select', function () {
 var selection = chart.getSelection();
 if (selection.length) {
 alert(dataTable.getValue(selection[0].bb, 0) + ' clicked');
 }
});

请注意,选择信息当前是侦听器;选择对象应具有 rowcolumn 属性,但是现在必须访问 bb 属性。 对于所有选择,时间线可以视化将列索引设置为 null,因这里不需要担心这一点。

原作者:
...