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

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

无法读取属性＆＃39;加载＆＃39;未定义的

如果我只用

替换2行

  google.charts.setOnLoadCallback(drawSarahChart);

  google.charts.setOnLoadCallback(drawAnthonyChart);

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

无法读取属性＆＃39; setOnLoadCallback＆＃39;未定义的

请帮助，谢谢！

Answer 1

实际上你试图两次使用相同的回调。除此之外，您可以定义一个回调函数，其中包含两个子函数 drawSarahChart 和 drawAnthonyChart

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

Answer 2

每个页面只应调用一次setOnLoadCallback

但您可以将callback直接包含在load声明

中

尝试这样的事情......

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

Google Charts每页只显示一个图表

2 个答案: