95 可读性
 将光标移到/点击文章中的句子上,可以查看译文。      显示繁体中文内容    显示简体中文内容

How to set event for Google chart?
如何设置Google图表的事件?

Hi i am using Google API to draw chart but i want to set event for each row of this table but i don't know how should i collect this element for example i wanna set event that whenever clicked in Magnolia Roomalert("Magnolia Room clicked");
Google chart link :
Google Timeline Chart
here is google javascript chart code :

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

And my HTML :

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

Is there any way to set an event for them??

时间:原作者:1个回答

You can use a"select"event handler to do this :

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

Please note that the selection info is currently bugged; the selection objects should have row and column properties, but those properties are obfuscated, so for now you have to access the row indices from the bb property.the Timeline visualization sets the column index to null for all selections, so you don't need to worry about that one.

原作者:
...