Javascript 谷歌图表每页只显示一张图表

我想显示两个图表，但出于某种原因，它只显示第一个

它只显示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>

相反，在开始时，两个图表均未显示控制台显示以下错误：

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

如果我只用

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

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

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

---

请帮忙，谢谢

实际上，您正在尝试使用同一回调两次。您可以定义一个回调函数，其中包含两个子函数drawSarahChart和drawsaranychart

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

---

实际上，您正在尝试使用相同的回调两次。您可以定义一个回调函数，其中包含两个子函数drawSarahChart和drawsaranychart

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

---

每页只应调用第一个

setOnLoadCallback

但是您可以在

load

语句中直接包含

回调

试试这样的

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

---

每页只应调用第一个

setOnLoadCallback

但是您可以在

load

语句中直接包含

回调

试试这样的

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

---

当我尝试此操作时，它显示两个有错误的图表都无法读取未定义的属性“setOnLoadCallback”，当我删除时，它仍然显示只有一个图表。您可以共享包含最终代码的JSFIDLE吗？当我尝试此操作时，它显示两个有错误的图表都无法读取未定义的属性“setOnLoadCallback”，并且当我删除.charts时，它仍然只显示了一个。你可以共享包含最终代码的JSFIDLE吗？对不起，我错了，它只显示了一个图表，错误表明给定的每一行必须为null或数组。与

load

语句无关，你可以共享数据样本吗？data.addRows（[，[“Ecran”，4][“Unite centrale”，6]，“Imprimante”，9]，“Scanner”，4]）；这是有问题的一行，正如您所看到的，在开始处有一个额外的逗号，我的代码没有，但在参考资料中显示，当我检查控制台中有错误的行时，您需要在每个

foreach

之前初始化

$prefix

变量。我不相信这是问题所在，一切都在ord中呃，现在，非常感谢你！对不起，我错了，它只显示了一个图表，错误是每一行都必须为null或数组。与

load

语句无关，你能共享数据样本吗？data.addRows（[，[，[“Ecran”，4]，“Unite centrale”，6]，“Imprimante”，9]，“Scanner”，4]）；这是有问题的一行，正如您所看到的，在开始处有一个额外的逗号，我的代码没有，但在参考资料中显示，当我检查控制台中有错误的行时，您需要在每个

foreach

之前初始化

$prefix

变量。我不相信这是问题所在，一切都在ord中呃,现在非常感谢你!！