Mehrere Google Charts auf einer einzigen Seite zeichnen?

Question

Grundsätzlich empfängt mein JavaScript Daten wie folgt: year = {month1, ...., month12}. Jeder Monat speichert Daten für 3 Grafiken. month1 = {graph1_data,..., graph3_data}

Ich möchte Diagramme für alle von ihnen mit Google Charts zeichnen. Das macht es 12 * 3 = 36 Charts. Ich habe die folgende Codelogik geschrieben. Aber es funktioniert nicht.

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); 
    }); 
} 

Es zieht 3 Charts month12. Warum passiert das? Bedeutet das, dass ich 36 malanrufen muss? Gibt es keinen alternativen Weg?

bearbeiten Es sieht aus wie einmal Google Chart API geladen wird, die Rückrufe in allen setOnLoadCallback s einmal aufgerufen wird. Das erklärt wahrscheinlich, warum ich nur einen Graphen bekomme, da zum Zeitpunkt der Ausführung der Funktion die Schleife bei month12 stehen geblieben wäre.

Answer 1

Also habe ich endlich herausgefunden, was hier falsch läuft.

Sie sind nur ein Rückruf mit der Google Charts API Registrierung, nicht wirklich es in Ihrem for(month in year) Schleife aufrufen. Der Rückruf wird aufgerufen (wie Sie sich denken können), wenn relevante Ressourcen geladen sind und die Diagramm-API beginnen kann zu zeichnen. Leider ist Ihre global definierte var month jetzt gleich month12. Dies ist der Zustand nach der for-Schleife vervollständigt:

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

Wie Sie sich vorstellen können, jetzt, wenn die Rückrufe, sie sind jeweils nur einmal aufgerufen, mit month = year.month12. Daher die drei Graphen, alle mit month12 Daten.

Also, wie behebst du das? Hier ist, wie:

1. Initialise drei Rückrufe nur einmal. Keine Notwendigkeit, sie anonym zu halten.

   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. Iterate über alle Monate in jedem Rückruf, und erstellen Sie eine neue Chart Instanz für jeden Monat. Zeichne es auch.

   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?

Vielleicht wollen Sie auch jede Chart Instanz in einem Array oder Wörterbuch Stil Objekt speichern. Auf diese Weise können Sie später Änderungen an Ihren Plots vornehmen, anstatt sie neu zu generieren und zu ersetzen.

---

ALTE ANTWORT: Dies geschieht, weil Sie das Diagramm für graph_1 in dem gleichen HTML-Elemente für jeden Monat ziehen. So überschreibt das Diagramm für graph_1[month2] das Diagramm für graph_1[month1]. Da graph_1[month12] die letzten zu verarbeitenden Daten sind, erhalten Sie das Diagramm für month12.Gleiches gilt für graph_2 und graph_3.

Was Sie versuchen können, ist ein neues svg oder vml Element zu Ihrem HTML document jedes Mal, wenn der Plot Callback aufgerufen wird. Dies kann innerhalb des Callbacks selbst erfolgen. Auf diese Weise erhalten Sie für jeden Graphen für jeden Monat ein neues Diagramm.