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

Это продолжение вопроса, который я уже задавал на StackOverflow. Поэтому, пожалуйста, убедитесь, что вы прочитали это, чтобы получить полную картину:

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

Поэтому, пытаясь сделать все это динамическим, я написал следующий код:

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) раз с одним и тем же набором параметров.

ОБНОВЛЕНИЕ:

Согласно ответу Атески, вот мой обновленный код:

    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 svg jquery google-visualization google-gauges
person Kassem    schedule 01.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Функция, которую вы привязываете к загрузке, перезаписывает предыдущую.

Возможно, вы можете сохранить значения в другом объекте и загрузить их все сразу в одной функции.

person Ateszki    schedule 01.06.2012
comment
Спасибо за предложение, надо было подумать об этом. Но в любом случае я понял, что делаю все неправильно. Я изменил свой код, но он по-прежнему не работает. Почему-то ничего не появляется ... - person Kassem; 01.06.2012

arrow_upward
1
arrow_downward

Хорошо, следующее решило проблему:

    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 для получения значений, которые я ищу ...

person Kassem    schedule 01.06.2012