Google Charts zeigt nur eine Karte pro Seite

Question

Ich habe zwei Tabellen i Anzeige möchte, aber aus irgendeinem Grund zeigt es nur die erste

es nur die sarahChart zeigt, und wenn ich tauschen die Reihenfolge der Funktionen, die es nur die anthonyChart

hier ist mein Skript zeigt:

<script type="text/javascript"> 

    google.load('visualization', '1.0', {'packages':['corechart']}); 

    google.setOnLoadCallback(drawSarahChart); 

    google.setOnLoadCallback(drawAnthonyChart); 

    function drawSarahChart() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Emplacement'); 
     data.addColumn('number', 'Quantité'); 
     data.addRows(<?php echo "[\n"; 
      echo $prefix . " [\n"; 
      echo ' "Stock",' . "\n"; 
      echo $count_stock . '' . "\n"; 
      echo " ]"; 
      $prefix = ",\n"; 
      echo $prefix . " [\n"; 
      echo ' "Maintenance",' . "\n"; 
      echo $count_maint . '' . "\n"; 
      echo " ]"; 
      $prefix = ",\n"; 
      foreach ($combined_depart as $key => $value) { 
       echo $prefix . " [\n"; 
       echo ' "' . $key . '",' . "\n"; 
       echo $value . '' . "\n"; 
       echo " ]"; 
       $prefix = ",\n"; 
     } 
     echo "\n]";?>); 

     var options = {title:'Nombre de materiel par emplacement', 
            width:600, 
            height:500}; 

     var chart = new google.visualization.PieChart(document.getElementById('Sarah_chart_div')); 
     chart.draw(data, options); 
    } 

    function drawAnthonyChart() { 

     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'type'); 
     data.addColumn('number', 'quantité'); 
     data.addRows(<?php echo "[\n"; 
      foreach ($combined as $key => $value) { 
       echo $prefix . " [\n"; 
       echo ' "' . $key . '",' . "\n"; 
       echo $value . '' . "\n"; 
       echo " ]"; 
       $prefix = ",\n"; 
     } 
     echo "\n]"; ?>); 

     var options = { 
      title: "Nombre de materiel par type", 
      width: 400, 
      height: 300 
     }; 

     var chart = new google.visualization.BarChart(document.getElementById('Anthony_chart_div')); 
     chart.draw(data, options); 
    } 

</script> 

und hier ist der html:

<table class="columns"> 
    <tr> 
    <td><div id="Sarah_chart_div"></div></td> 
      <td><div id="Anthony_chart_div"></div></td> 
    </tr> 
</table> 

Durch die Art und Weise, wenn ich stattdessen Zu Beginn

google.charts.load('current', {'packages':['corechart']}); 

    google.charts.setOnLoadCallback(drawSarahChart); 

    google.charts.setOnLoadCallback(drawAnthonyChart); 

setzen, zeigen weder die Charts die Konsole die folgenden Fehler zeigt:

Kann lesen Eigenschaft ‚load‘ undefinierten

nicht

und wenn nur die i ersetzen 2 Zeilen mit

google.charts.setOnLoadCallback(drawSarahChart); 

    google.charts.setOnLoadCallback(drawAnthonyChart); 

weder zeigen noch einmal, die Konsole die folgenden Fehler zeigt:

Kann Eigenschaft nicht lesen ‚setOnLoadCallback‘ undefinierter

bitte helfen, danke!

Answer 1

erste setOnLoadCallback sollte nur einmal pro Seite

genannt werden, aber Sie können, umfassen die callback direkt in der load Anweisung

so etwas wie dieses versuchen ...

google.load('visualization', '1.0', { 
    callback: function() { 
    drawSarahChart(); 
    drawAnthonyChart(); 
    }, 
    packages: ['corechart'] 
}); 

Answer 2

Eigentlich versuchen Sie, denselben Rückruf zweimal zu verwenden. Statt dessen können Sie eine Callback-Funktion definieren, die Ihre beiden Unterfunktion drawSarahChart umfasst und drawAnthonyChart

google.charts.setOnLoadCallback(function(){ 
    drawSarahChart(); 
    drawAnthonyChart(); 
});