Javascript 如何将onclick事件添加到Google图表的量表中？_Javascript_Jquery_Google Visualization_Jquery Events

Javascript 如何将onclick事件添加到Google图表的量表中？

javascript jquery google-visualization

Javascript 如何将onclick事件添加到Google图表的量表中？,javascript,jquery,google-visualization,jquery-events,Javascript,Jquery,Google Visualization,Jquery Events,我需要处理仪表上的onclick事件。我还没有在谷歌图表文档中找到通过仪表注册事件的例子我尝试了以下方法： <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript&quo

我需要处理仪表上的

onclick

事件。我还没有在谷歌图表文档中找到通过仪表注册事件的例子

我尝试了以下方法：

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body>
        <div id="gauge_div"></div>
    </body>
</html>


load（“可视化”，“1”，{packages:[“corechart”，“gauge”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'LABEL'）；
data.addColumn（'number'，'TOTAL'）；
数据。添加行（1）；
设置值（0，0，'速度'）；
数据设置值（0,1240）；
var gaugeOptions={min:0，max:280，yellowFrom:200，yellowTo:250，标题：“公司绩效”，redFrom:250，redTo:280，minorTicks:5}；
var gauge=new google.visualization.gauge（document.getElementById（'gauge_div'））；
量规。绘图（数据、量规选项）；
google.visualization.events.addListener（量表'select'，函数（）{
警报（“此处”）；
});
}

此外，我还尝试使用JQuery将onclick事件添加到div“gauge\u div”中，但它仅在我单击div的边界时有效，而不是在gauge上。gauge没有触发的事件。图表在iframe中呈现，该iframe在本地dom中也没有单击事件，而是在iframe的window.document.body中呈现。我使用的一个解决方案是创建一个相对位于仪表顶部的空div，并在其上注册click事件

<html>
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("visualization", "1", {packages:["corechart","gauge"]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'LABEL');
                data.addColumn('number', 'TOTAL');
                data.addRows(1);
                data.setValue(0, 0, 'Speed');
                data.setValue(0, 1, 240);
                var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250, title: 'Company Performance', redFrom: 250, redTo: 280, minorTicks: 5};
                var gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
                gauge.draw(data, gaugeOptions);
                google.visualization.events.addListener(gauge, 'select', function() {
                    alert("Here");
                });
            }
        </script>
    </head>
    <body style="position:relative;">
        <div id="gauge_div"></div>
        <div id="gauge_div_clickable" style="position:absolute;z-index:2;top:- 120px;width:120px;height:120px;" onclick="alert('here');">
    </body>
</html>


load（“可视化”，“1”，{packages:[“corechart”，“gauge”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'LABEL'）；
data.addColumn（'number'，'TOTAL'）；
数据。添加行（1）；
设置值（0，0，'速度'）；
数据设置值（0,1240）；
var gaugeOptions={min:0，max:280，yellowFrom:200，yellowTo:250，标题：“公司绩效”，redFrom:250，redTo:280，minorTicks:5}；
var gauge=new google.visualization.gauge（document.getElementById（'gauge_div'））；
量规。绘图（数据、量规选项）；
google.visualization.events.addListener（量表'select'，函数（）{
警报（“此处”）；
});
}

要获得可点击的仪表，请添加以下javascript：

$('#gauge_div').find('iframe')).each(function(elt, idx) {
   $(elt).contents().find('body').click(function (event) {
      // gauge.getSelection() does not exists so we emulate its result:
      var selection = [{'row': idx}];
      common_onclick_callback(selection);
   });
});

其特点是：

不同的仪表
```
onclick
```
（与多个仪表一起使用，并对其进行识别）
快速
```
gauge.getSelection（）
```
结果模拟的示例，如果您想重新使用本应为其他google图表类型编写的
```
onclick
```
回调，该示例将非常有用

这是因为：

每个

iframe

都会在其

主体中钩住事件（否则不会触发onclick
事件）


每个onclick
回调都会获得与其在HTML中的位置相关的适当索引idx


此示例使用：

jquery，它映射到$
，并提供选择器和查找
，内容
方法
在映射到的下划线，并提供每个设施


但是这两个都是可选的，但是很方便。
使用jQuery可以使用如下内容
$( "#gauge_div td:nth-child(2)" ).click(function() {
    var tData = data.getValue(1,0);
    alert( "Handler for .click() called."+ tDate);
});

假设您的仪表数据保存在一个名为“data”的变量中，您将调用第二个子变量，正确的数据行将是行“1”，因为它将以0开头
ie 0=1，1=2，2=3，3=4，…
我从CrandellWS的答案开始，但最终得到了以下更简单的答案：
$('#gauge_div td').click(function() {
   alert(data.getValue(this.cellIndex,0));
});

是的，如果您只有一个仪表，这是可行的，但是当您呈现多个仪表时，我希望获得onclick事件并确定发起人。在这种情况下，您可能希望了解如何从iframe捕获click事件。