在單個頁面上繪製多個Google圖表？

Question

基本上我的JavaScript接收這樣的數據：year = {month1, ...., month12}。每月存儲3張圖的數據。 month1 = {graph1_data,..., graph3_data}

我希望使用Google圖表爲所有人繪製圖表。因此，它使12 * 3 = 36圖表。我寫了下面的代碼邏輯。但它失敗了。

for (month in year) 
{ 
    google.charts.setOnLoadCallback(function(){ 
      // draw graph1 
      var data = new google.visualization.DataTable(); 
      // code 
      // code 
      // data.addColumn() 
      // data.addColumn() 
      data.addRows(data_table); 
      var options = {title: month, height:100}; 
      var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph1')); 
      chart.draw(data, options); 
    }); 

    google.charts.setOnLoadCallback(function(){ 
      // draw graph2 
      google.charts.setOnLoadCallback(function(){ 

      var data = new google.visualization.DataTable(); 
      // code 
      // code 
      // data.addColumn() 
      // data.addColumn() 
      data.addRows(data_table); 
      var options = {title: month, height:100}; 
      var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph2')); 
      chart.draw(data, options); 
    }); 

    google.charts.setOnLoadCallback(function(){ 
      // draw graph3 
      google.charts.setOnLoadCallback(function(){ 

      var data = new google.visualization.DataTable(); 
      // code 
      // code 
      // data.addColumn() 
      // data.addColumn() 
      data.addRows(data_table); 
      var options = {title: month, height:100}; 
      var chart = new google.visualization.ColumnChart(
    document.querySelector('#'+month+' .graph3)); 
      chart.draw(data, options); 
    }); 
} 

它繪製了month12的3個圖表。現在爲什麼會發生？這是否意味着我必須撥打setOnLoadCallback 36次？沒有其他辦法嗎？

編輯 它看起來像一次谷歌圖API被加載，在所有setOnLoadCallback s的調用一次回調。這可能解釋了爲什麼我只能得到一個圖表，因爲在執行函數時，循環將停止在month12。

Answer 1

所以我終於明白了這裏出了什麼問題。

你只註冊與谷歌圖表API的回調，實際上不調用它在你的for(month in year)循環。當相關資源完成加載並且Charts API可以開始繪製時，將調用回調（正如您猜測的那樣）。不幸的是，您的全局定義的var month現在等於month12。這是國家的for循環完成後：

month = year.month12; 
callback_for_graph_1 = <anonymous function 1> 
callback_for_graph_2 = <anonymous function 2> 
callback_for_graph_3 = <anonymous function 3> 

你可以想像，現在當回調，它們分別被稱爲只有一次，month = year.month12。因此這三個圖表全部用month12數據。

那麼你如何解決這個問題呢？具體方法如下：只有

1. 初始化3個回調一次。不需要保持匿名。

   google.charts.setOnLoadCallback(callbackForGraph1); 
   google.charts.setOnLoadCallback(callbackForGraph2); 
   google.charts.setOnLoadCallback(callbackForGraph3); 
   
   function callbackForGraph1 { 
   // do your thing 
   } 
   function callbackForGraph2 { 
   // do your thing 
   } 
   function callbackForGraph3 { 
   // do your thing 
   } 
   

2. 遍歷每個回調裏面所有的幾個月，每個月創建一個新的Chart實例。也畫出來。

   function callbackForGraph1() { 
       for(month in year) { 
       // draw graph1 
       var data = new google.visualization.DataTable(); 
       // code 
       // code 
       // data.addColumn() 
       // data.addColumn() 
       data.addRows(data_table); 
       var options = {title: month, height:100}; 
       // this is your Chart instance -> 
       var chart = new google.visualization.ColumnChart(document.querySelector('#'+month+' .graph1')); 
       // draw it! 
       chart.draw(data, options); 
       } 
   } 
   

3. 獲利？

您可能還需要每個Chart實例存儲陣列或字典樣式對象英寸這樣，您可以稍後對繪圖進行更改，而不必重新生成並替換它們。

---

OLD答：這是因爲你在每個月的同一HTML元素繪製圖表graph_1。因此graph_1[month2]的圖表會覆蓋圖表graph_1[month1]。由於graph_1[month12]是待處理的最後一個數據，因此您可以獲得month12的圖表。同樣發生在graph_2和graph_3。

每次調用繪圖回調函數時，您可以嘗試在您的HTML document上追加一個新的svg或vml元素。這可以在回調本身內完成。這樣你可以爲每個圖表每個月獲得一個新的圖表。