Google图表会在第一个图表停止绘制 [英] Google Charts stops drawing after first chart

问题描述

在一页上显示多个Barcharts

Show multiple Barcharts on one Page

Barcharts以前一直是Linecharts。
作为Linecharts我可以在同一页上显示两个图表没有问题。
我为它们使用了两个单独的drawChart（）函数。
然后我将图表转换为Barcharts（材料设计）。
现在只显示一个图表。
我已经搜索了一个答案，发现这个：如何在一个页面上添加两个Google图表？
我遵循这一点，它仍然无法工作。

The Barcharts have prevously been Linecharts. As Linecharts I could show two Charts on the same page without a problem. I used two seperate drawChart()-functions for them. I then converted the charts to Barcharts (material design). Now it only shows one chart. I already searched for an answer and found this: How to add two Google charts on the one page? I follow this and it still doesn't work.

<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（）函数，它可以确认代码运行到结束。

It only shows one chart. Most of the tme its the first but in sometimes its the second one. By using the alert()-function it can confirm that the code runs until the end.

推荐答案

这个行为与 draw 函数相关。特别地，由于在 draw 函数第二次被调用后不产生图表SVG，因此不再呈现第二图表。

It seems this behavior is related with draw function. In particular, the second chart is not rendered since chart SVG is not getting generated after draw function is invoked for the second time.

根据文档：

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

The draw() method is asynchronous: that is, it returns immediately, but the instance that it returns might not be immediately available.

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

For rendering multiple charts on the page you could consider the following approach: render the next chart once the previous one is rendered, for example:

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>

这篇关于Google图表会在第一个图表停止绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！