如何为Google图表设置事件？ [英] How to set event for Google chart?

问题描述

您好，我使用Google API绘制图表，但我想为此表的每一行设置事件，但我不知道如何收集此元素，例如我想设置事件，当点击玉兰房间 提醒（Magnolia Room clicked）;

Google图表链接：

Google时间轴图表

这里是google javascript图表代码：

 < script type =text / javascriptsrc =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'，新日期（0,0,0,16,30,0），新日期（0,0,0,18,0,0）]，
 ['Petunia Room'，'Google Charts'，新日期（0,0,0,12,30,0），新日期（0,0,014,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>示例< / title> 
< / head> 
< body> 
< div id =example5.3style =width：900px; height：200px;>< / div> 
< / body> 
< / html>是否有任何方法为他们设置事件
 
 
 div class =h2_lin>解决方案

您可以使用select事件处理程序执行此操作：

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

请注意，选择信息目前有错误;选择对象应该具有 row 和列属性，但是这些属性被模糊处理，因此现在您必须访问属性的 bb 行索引。对于所有选择，时间轴可视化将列索引设置为 null ，因此您不必担心该索引。

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 Room alert("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??

解决方案

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.

这篇关于如何为Google图表设置事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！