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

在開始時，兩個圖表都沒有顯示控制台顯示以下錯誤：

無法讀取undefined的屬性'load'

如果我只更換2行

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

再次顯示，控制台顯示以下錯誤：

無法讀取未定義的屬性'setOnLoadCallback'

請幫幫忙，謝謝！

Answer 1

實際上你試圖兩次使用相同的回調。 而不是這個，你可以定義一個回調函數，其中包括你的兩個子函數drawSarahChart和drawAnthonyChart

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

Answer 2

每個頁面只應調用一次setOnLoadCallback

但是您可以直接在load語句中包含callback

嘗試這樣的事......

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