如何爲Google圖表設置事件？

嗨我使用谷歌API來繪製圖表，但我想設置該表的每一行的事件，但我不知道我應該如何收集這個元素，例如我想設置事件，每當點擊玉蘭室alert("Magnolia Room clicked");
谷歌圖表鏈接：
Google Timeline Chart
這裏是谷歌的javascript代碼圖表：如何爲Google圖表設置事件？

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

有沒有辦法爲他們設置一個事件？

來源

2014-07-19 Daniel.V

您可以使用「選擇」事件處理程序來做到這一點：

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

請注意，選擇信息，目前竊聽;選擇對象應具有row和column屬性，但這些屬性會被混淆，因此現在必須訪問bb屬性中的行索引。時間軸可視化將所有選擇的列索引設置爲null，因此您無需擔心該索引。

來源

2014-07-19 13:35:21 asgallant

如何爲Google圖表設置事件？

回答

相關問題