1つのページに複数のGoogle Chartを描画しますか？

Question

基本的に私のJavaScriptは、year = {month1, ...., month12}のようなデータを受け取ります。毎月、3つのグラフのデータが格納されます。 month1 = {graph1_data,..., graph3_data}

Google Chartsを使用して、すべてのチャートを描画したいと考えています。つまり、それは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回呼ぶ必要があることを意味しますか？別の方法はありませんか？

編集 GoogleのチャートAPIがロードされると、すべてのsetOnLoadCallback秒でコールバックが一度呼び出されるように見えます。関数の実行時にループがmonth12で停止していたため、グラフが1つしかない理由については、おそらく説明します。

Answer 1

だから、ここで何がうまくいかないのかが分かりました。

あなたfor(month in year)ループでそれを呼び出して、実際に、GoogleのチャートAPIでをコールバックを登録していないだけです。関連するリソースの読み込みが完了し、Charts APIが描画を開始できるときにコールバックが呼び出されます（推測できるように）。残念ながら、グローバルに定義された変数monthは今やmonth12に等しくなりました。これは、ループのためのあなたの後の状態が完了している：

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で、今コールバックが、これらはそれぞれ一度だけ呼び出されたときに、想像できるように。したがって、3つのグラフはすべて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. Profit？

また、配列や辞書スタイルオブジェクト内の各Chartインスタンスを保存することもできます。そうすることで、プロットを再生成して置き換えるのではなく、プロットを後で変更することができます。

---

OLD ANSWER：あなたは、各月の同じHTML要素にgraph_1のグラフを描くためです。したがって、graph_1[month2]のグラフはgraph_1[month1]のグラフを上書きします。 graph_1[month12]が処理される最後のデータであるため、month12のグラフが表示されます。同様に、graph_2とgraph_3に対しても発生します。

プロットコールバックが呼び出されるたびに、新しいsvgまたはvml要素をHTML documentに追加することをお試しください。これは、コールバック自体から行うことができます。そうすれば、すべてのグラフについて毎月新しいグラフが作成されます。