如何将onclick事件添加到Google Chart的Gauge？

我需要处理标尺上的onclick事件。我没有在Google图表文档中找到Gauges上注册事件的示例。如何将onclick事件添加到Google Chart的Gauge？

我曾尝试以下：

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

此外，我试图用jQuery添加onclick事件格“gauge_div”但如果我点击div的边界，而不是在计它只。

来源

2011-11-03 Ernesto Campohermoso

Gauge没有触发的事件。该图表在iframe中呈现，该iframe在本地dom中也没有click事件，而是在iframe的window.document.body中。我使用的解决方案是创建一个相对位于标尺顶部的空白div，并在其上注册点击事件。

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

来源

2011-12-12 19:53:22 chris

是这个作品，如果你只有一个计，但是当你有使许多计我想要得到的onclick事件并识别发件人。 –

在这种情况下，您可能想了解如何从iframe捕获点击事件。 http://stackoverflow.com/questions/1609741/how-to-add-click-event-to-a-iframe-with-jquery – chris

为了获得点击量规，添加此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()结果仿真，如果你想重新使用一个onclick回调，这可能是有用的哟你已经为其他谷歌图表类型写过。

这样做是因为：

每个iframe是看在钩事件的body（否则onclick事件触发）
每个onclick回调得到与一个适当的索引idx其在HTML中的位置。

此示例使用：

jquery的被映射到$，并提供选择器和find，contents方法
下划线被映射到_，并提供each设施

但这两个都是可选的，但方便。

来源

2012-08-07 09:30:39 vaab

使用jQuery一个可以使用nth-child selector这样的事情...

$("#gauge_div td:nth-child(2)").click(function() { 
    var tData = data.getValue(1,0); 
    alert("Handler for .click() called."+ tDate); 
});

假设您的计数据在一个名为“数据”变量中，你会叫老二和正确的数据行会行“1”，因为它将以0开始。

即0 = 1,1 = 2,2 = 3，3 = 4，......

来源

2014-08-07 20:27:28 CrandellWS

我开始与CrandellWS的答案，但结束了以下，这是更简单：

$('#gauge_div td').click(function() { 
    alert(data.getValue(this.cellIndex,0)); 
});

来源

2016-07-14 22:53:16

如何将onclick事件添加到Google Chart的Gauge？

回答

相关问题