如何將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？

回答

相關問題