单独的Divs内的Google Visualizations图表的多个实例

我试图在同一个屏幕上的不同div中显示几个Google Gauge图表 。 我还需要处理这些div上的click事件（因此是图表）。 我试图动态地这样做，但我遇到了一些问题。 但无论如何，即使我尝试静态（有效），我仍然无法使图表区域可点击。 发生的事情是整个div是可点击的，除了图表区域。

无论如何，这是我的（杂乱测试）代码：

 
 document.getElementsByClassName = function (cl) { var retnode = []; var myclass = new RegExp('\\b' + cl + '\\b'); var elem = this.getElementsByTagName('*'); for (var i = 0; i < elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) retnode.push(elem[i]); } return retnode; }; google.load('visualization', '1', {packages:['gauge']}); google.setOnLoadCallback(function () { drawChart1(); drawChart2(); }); function drawChart1() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Memory', 80] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom:75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('gaugePlaceHolder')); chart.draw(data, options); } function drawChart2() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Another', 30] ]); var options = { width: 400, height: 120, redFrom: 90, redTo: 100, yellowFrom: 75, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('gaugePlaceHolder2')); chart.draw(data, options); } window.onload = function () { var elements = $('.gaugeWrapper'); console.log(elements); elements.click(function () { alert("clicked"); }); } 

任何解释/建议？

Answer 1

向Gauge添加侦听器的正确方法是使用google.visualization.events.addListener方法， 如此示例所示。

您也可以在Google Playground上试用您的代码。