单独 div 内的多个 Google 可视化图表实例 [跟进]答案

【问题标题】：Multiple Instances of Google Visualizations Chart Inside Separate Divs [Followup]单独 div 内的多个 Google 可视化图表实例 [跟进]
【发布时间】：2012-06-01 11:26:00
【问题描述】：

这是我在 StackOverflow 上提出的问题的后续。因此，请确保您阅读了那篇文章以了解全貌：

Multiple Instances of Google Visualizations Chart Inside Separate Divs

因此，为了使整个事情变得动态，我编写了以下代码：

var containers = document.getElementsByClassName('gaugeWrapper');
    console.log(containers);
    google.load('visualization', '1', { packages: ['gauge'] });
    for(var i = 0; i < containers.length; i++) {
        var id = containers[i].getAttribute('id');
        var name = containers[i].getAttribute('data-name');
        var value = containers[i].getAttribute('data-value');
        google.setOnLoadCallback(function () { drawChart(id, name, value) });

    }

    function drawChart(id, name, value) {
        console.log(id);
        console.log(name);
        console.log(value);
        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
        ]);

        var options = {
            width: 400, height: 120,
            redFrom: 90, redTo: 100,
            yellowFrom: 75, yellowTo: 90,
            minorTicks: 5
        };

        var chart = new google.visualization.Gauge(document.getElementById(id));
        chart.draw(data, options);
    }

这不起作用。问题是控制台只输出最后一个 div 的数据。这意味着使用相同的参数集调用该函数 5 (containers.length) 次。

更新：

根据 Ateszki 的回答，这是我更新后的代码：

    google.load('visualization', '1', { packages: ['gauge'] });     
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var containers = document.getElementsByClassName('gaugeWrapper');
        for (var i = 0; i < containers.length; i++) {

            var id = containers[i].getAttribute('id');
            var name = containers[i].getAttribute('data-name');
            var value = containers[i].getAttribute('data-value');

            var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
                ]);

            var options = {
                width: 400, height: 120,
                redFrom: 90, redTo: 100,
                yellowFrom: 75, yellowTo: 90,
                minorTicks: 5
            };
            var cont = document.getElementById(id);
            console.log(cont);
            var chart = new google.visualization.Gauge(cont);
            chart.draw(data, options);
        }
    }

不幸的是，我仍然无法让它工作。现在屏幕上什么都没有呈现，尽管我的 console.log 似乎输出了正确的东西......

有什么解释/建议吗？

【问题讨论】：

标签： javascript jquery svg google-visualization google-gauges

【解决方案1】：

你绑定的onload函数正在覆盖之前的函数。

也许您可以将值存储在另一个对象中，然后在一个函数中一次将它们全部加载。

【讨论】：

感谢您的建议，应该考虑一下。但无论如何，我发现我做错了。我已经更改了我的代码，但它仍然无法正常工作。由于某种原因没有显示任何内容...

【解决方案2】：

好的，下面的问题已经解决了：

    google.load('visualization', '1', { packages: ['gauge'] });     
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var containers = $('.gaugeWrapper');
        containers.each(function (index, elem) {

            var id = $(elem).attr('id');
            var name = $(elem).data('name');
            var value = $(elem).data('value');

            var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          [name, value]
                ]);

            var options = {
                width: 400, height: 120,
                redFrom: 90, redTo: 100,
                yellowFrom: 75, yellowTo: 90,
                minorTicks: 5
            };
            var cont = document.getElementById(id);
            var chart = new google.visualization.Gauge(cont);
            chart.draw(data, options);
        });

我不知道它与问题更新部分中的代码有何不同，除了我现在使用 jQuery 来获取我正在寻找的值...

【讨论】：