Mehrere Instanzen von Google Visualizations Chart in separaten Divs

Ich versuche mehrere zu zeigenGoogle Gauge-Diagramme in separaten Divs auf dem gleichen Bildschirm. Ich muss auch das Click-Ereignis für diese Divs (folglich die Charts) behandeln. Ich habe versucht, das dynamisch zu machen, aber ich hatte einige Probleme. Aber selbst wenn ich dies statisch versuchte (was funktionierte), konnte ich den Diagrammbereich immer noch nicht zum Klicken bringen. Was passiert ist, ist, dass die gesamte Div mit Ausnahme des Diagrammbereichs anklickbar ist.

Wie auch immer, hier ist mein (chaotisch - Test) Code:

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

Irgendwelche Erklärungen / Vorschläge?

Antworten auf die Frage(1)

Ihre Antwort auf die Frage