谷歌可視化圖表的多個實例圖內部獨立的科室[跟進]

Question

這是我已經問過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似乎輸出正確的東西...

任何解釋/建議？

Answer 1

好以下已經解決了這個問題：

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搶值的事實，更新部分我在尋找...

Answer 2

你綁定onload的函數覆蓋前一個函數。

也許您可以將值存儲在另一個對象中，並將它們一次加載到一個函數中。