Plusieurs instances du diagramme de visualisations de Google à l'intérieur des divisions séparées

J'essaie de montrer plusieurs graphiques Google Gauge dans des divs séparés sur le même écran. J'ai également besoin de gérer l'événement de clic sur ces divs (par conséquent, les graphiques). J'ai essayé de le faire de façon dynamique mais j'ai eu des problèmes. Mais de toute façon, même lorsque j'ai essayé de le faire de façon statique (ce qui fonctionnait), je ne pouvais toujours pas faire passer la zone du graphique. Ce qui s'est passé, c'est que toute la division est cliquable, sauf pour la zone du graphique.

Quoi qu'il en soit, voici mon code (test de désordre):

<div id="gaugePlaceHolder" class="gaugeWrapper"></div> <div id="gaugePlaceHolder2" class="gaugeWrapper"></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"); }); } 

Des explications / suggestions?

La bonne façon d'ajouter un auditeur à une jauge utilise la méthode google.visualization.events.addListener , comme indiqué dans cet exemple .

Vous pouvez également essayer votre code sur Google Playground .