Múltiples instancias del gráfico de visualizaciones de Google dentro de divs separados

Estoy tratando de mostrar varios gráficos de Google Gauge en divs separados en la misma pantalla. También necesito manejar el evento de clic en esos divs (en consecuencia, los gráficos). Intenté hacerlo dinámicamente pero tuve algunos problemas. Pero de todos modos, incluso cuando intenté hacer esto de forma estática (lo que funcionó), todavía no pude hacer clic en el área del gráfico. Lo que sucedió es que se puede hacer clic en toda la división excepto en el área del gráfico.

De todos modos, aquí está mi código (desordenado – prueba):

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"); }); }

¿Alguna explicación / sugerencia?

La forma correcta de agregar un oyente a un indicador es mediante el método google.visualization.events.addListener , como se muestra en este ejemplo .

También puedes probar tu código en Google Playground .

Intereting Posts