谷歌图表在第一张图表后停止绘制

Question

我想做什么

在一页上显示多个条形图

我已经做过的事情

条形图以前是折线图。 作为 Linecharts，我可以毫无问题地在同一页面上显示两个图表。 我为它们使用了两个单独的 drawChart() 函数。 然后我将图表转换为条形图（材料设计）。 现在它只显示一张图表。 我已经搜索了答案并找到了这个：How to add two Google charts on the one page? 我按照这个，它仍然不起作用。

我的代码

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1.1", {
        packages: ["Bar"]
    });
    google.setOnLoadCallback(drawChart);

    function drawChart() {

        var data1 = new google.visualization.DataTable();
        data1.addColumn("string", "Key1");
        data1.addColumn("number", "Value1");

        data1.addRows([
            ['2015.01', 65.5],
            ['2015.02', 52.6],
            ['2015.03', 45.5],
            ['2015.04', 40.7],
            ['2015.05', 68.7],
            ['2015.06', 56.4],
            ['2015.07', 38.4],
            ['2015.08', 45.2],
            ['2015.09', 45.2],
            ['2015.10', 4.8]
        ]);

        var data2 = new google.visualization.DataTable();
        data2.addColumn("string", "Key2");
        data2.addColumn("number", "Value2");

        data2.addRows([
            ['2015.01', 300.08],
            ['2015.02', 455.08],
            ['2015.03', 454.62],
            ['2015.04', 362.93],
            ['2015.05', 527.12],
            ['2015.06', 588.28],
            ['2015.07', 409.93],
            ['2015.08', 432.08],
            ['2015.09', 462.33],
            ['2015.10', 32.38]
        ]);

        var options = {};

        var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
        chart1.draw(data1, options);

        var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
        chart2.draw(data2, options);

    }


</script>

<div id="chart_div1"></div>
<div id="chart_div2"></div>

最佳观看：https://jsfiddle.net/yrzf3v97/

问题

它只显示一张图表。大部分时间是第一个，但有时是第二个。 通过使用 alert() 函数，它可以确认代码运行到最后。

Answer 1

似乎这种行为与draw 函数有关。特别是，第二个图表没有呈现，因为在第二次调用draw 函数后，没有生成图表 SVG。

根据the documentation：

draw() 方法是异步的：即立即返回， 但它返回的实例可能不会立即可用。

为了在页面上呈现多个图表，您可以考虑以下方法：在呈现前一个图表后呈现下一个图表，例如：

var chart1 = new google.charts.Bar(document.getElementById("chart_div1"));
google.visualization.events.addOneTimeListener(chart1, 'ready', function(){
     //render chart2 once chart1 is rendered
     var chart2 = new google.charts.Bar(document.getElementById("chart_div2"));
     chart2.draw(data2, options);     
});
chart1.draw(data1, options);

完整示例

google.load("visualization", "1.1", { packages: ["Bar"] });
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data1 = new google.visualization.DataTable();
    data1.addColumn("string", "Key1");
    data1.addColumn("number", "Value1");

    data1.addRows([['2015.01', 65.5],
        ['2015.02', 52.6],
        ['2015.03', 45.5],
        ['2015.04', 40.7],
        ['2015.05', 68.7],
        ['2015.06', 56.4],
        ['2015.07', 38.4],
        ['2015.08', 45.2],
        ['2015.09', 45.2],
        ['2015.10', 4.8]]);

    var data2 = new google.visualization.DataTable();
    data2.addColumn("string", "Key2");
    data2.addColumn("number", "Value2");

    data2.addRows([['2015.01', 300.08],
        ['2015.02', 455.08],
        ['2015.03', 454.62],
        ['2015.04', 362.93],
        ['2015.05', 527.12],
        ['2015.06', 588.28],
        ['2015.07', 409.93],
        ['2015.08', 432.08],
        ['2015.09', 462.33],
        ['2015.10', 32.38]]);

    var options = {};
    drawCharts([{id: 'chart_div1', data: data1, options: options},{id: 'chart_div2', data: data2, options: options}]);
}



function drawCharts(chartsOptions,index)
{
    var curIndex = index || 0;
    var chartOptions = chartsOptions[curIndex];
    var chart = new google.charts.Bar(document.getElementById(chartOptions.id));
    google.visualization.events.addOneTimeListener(chart, 'ready', function(){
       if(curIndex < chartsOptions.length - 1)
          drawCharts(chartsOptions,curIndex+1);
    });
    chart.draw(chartOptions.data, chartOptions.options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div1"></div>
<div id="chart_div2"></div>

Answer 2

对于在 2016 年遇到此问题的任何人，您可能有像我一样的代码，它引用了旧版本的 Google 图表。更新您的参考资料以遵循https://developers.google.com/chart 的最新指南。就我而言，以下逐行更改解决了该问题：

旧：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load('visualization', '1.1', {'packages':['bar']});
google.setOnLoadCallback(drawCharts);
var chart = new google.charts.Bar(document.getElementById('myDivId'));
chart.draw(data, google.charts.Bar.convertOptions(options));

新：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawCharts);
var chart = new google.visualization.ColumnChart(document.getElementById('myDivId'));
chart.draw(data, options);