Несколько экземпляров диаграммы визуализаций Google внутри отдельных элементов Div

Question

Я пытаюсь показать несколько диаграмм Google Gauge в отдельных div на одном экране. Мне также нужно обработать событие click для этих элементов (следовательно, диаграмм). Я пытался сделать это динамически, но у меня были некоторые проблемы. Но в любом случае, даже когда я пытался сделать это статически (что сработало), я все еще не мог заставить область графика быть кликабельной. Что произошло, так это то, что весь div можно активировать, кроме области диаграммы.

В любом случае, вот мой (грязный - тестовый) код:

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

Любые объяснения / предложения?

Answer 1

Правильный способ добавить слушателя в Gauge - это использовать google.visualization.events.addListener метод, как показано в этом примере.

Вы также можете попробовать свой код на Google Playground.