Google Charts показывает только одну диаграмму на странице

Question

У меня есть две диаграммы, я хотел бы показать, но по какой-то причине он показывает только первый один

это только показывает sarahChart и если я поменять порядок функций его покажет только anthonyChart

вот мой сценарий:

<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> 

и вот HTML:

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

Кстати, если я поставил

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

    google.charts.setOnLoadCallback(drawSarahChart); 

    google.charts.setOnLoadCallback(drawAnthonyChart); 

В начале вместо этого, ни один из этих графиков показывает консоль показывает следующее сообщение об ошибке:

Не удается прочитать свойство «груза» неопределенной

и если я заменить только 2 строки с

google.charts.setOnLoadCallback(drawSarahChart); 

    google.charts.setOnLoadCallback(drawAnthonyChart); 

ни показать снова, консоль показывает следующее сообщение об ошибке:

Не могу прочитать свойство «setOnLoadCallback» неопределенной

пожалуйста, помогите, спасибо!

Answer 1

первый setOnLoadCallback должен вызываться только один раз на странице

, но вы можете включить callback непосредственно в заявлении load

попробуйте что-то вроде этого ...

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

Answer 2

На самом деле вы пытаетесь использовать один и тот же обратный вызов дважды. Вместо этого, вы можете определить функцию обратного вызова, которая включает в себя ваши две подфункции drawSarahChart и drawAnthonyChart

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