Google可视化图表的多个实例在单独的Div内部显示 [英] Multiple Instances of Google Visualizations Chart Inside Separate Divs

问题描述

我试图展示几个 Google量表图表在同一屏幕上的单独的div中。我还需要处理这些div（因此图表）上的点击事件。我试图做到这一点，但我有一些问题。但无论如何，即使当我试图做这个静态（工作），我仍然无法让图表区域可点击。发生了什么事是整个div是可点击的，除了图表区域。

I'm trying to show several Google Gauge charts in separate divs on the same screen. I also need to handle the click event on those divs (consequently the charts). I tried to do that dynamically but I had some issues. But anyway, even when I tried do this statically (which worked), I still couldn't get the chart area to be clickable. What happened is that the whole div is clickable except for the chart area.

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

Anyway, here's my (messy - 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");
    });
}

任何解释/建议？

Any explanations/suggestions?

推荐答案

向Gauge添加监听器的正确方法是使用 google.visualization.events.addListener 方法，如图所示在这个例子中。

The right way to add a listener to a Gauge is using google.visualization.events.addListener method, as shown in this example.

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

You could also try your code on Google Playground.

这篇关于Google可视化图表的多个实例在单独的Div内部显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！