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

相反，在开始时，两个图表都没有显示控制台显示以下错误:

无法读取未定义的属性“load”

如果我只用

替换 2 行

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

都不再显示，控制台显示以下错误:

无法读取未定义的属性“setOnLoadCallback”

请帮忙，谢谢!

Answer 1

第一个 setOnLoadCallback 每页只能调用一次

但您可以将回调直接包含在load语句中

尝试这样的事情...

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