动态绘制多个图表时，Google Chart 不显示答案

【问题标题】：Google Chart doesn't display when drawing multiple charts dynamically动态绘制多个图表时，Google Chart 不显示
【发布时间】：2015-12-23 10:05:08
【问题描述】：

我收到一些带有 ajax 的数据，我想将其显示为谷歌折线图。我不知道要显示多少图表，所以我使用 javascript forEach 调用我的函数 drawchart(); 使其动态化

我在这里收到数据：

$j.ajax({
        type: "GET",
        url: "../"+folder_destination+"slimrest/getValues",
        data: "",
        success: function(msg){
            msg.forEach(function(entry) {
                drawchart(entry['id'], entry['data']);
            });
        }
});

这是我的函数，它应该添加一个具有唯一 ID 的 div，然后在里面绘制图表：

function drawchart(id_rec){

    $j("#charts_cartes").append("<div id=\"gchart_"+id_rec+"\"></div>");

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'max');
    data.addColumn('number', 'min');
    data.addColumn('number', 'Mesures');

    //Will be dynamic as soon as I'll be able to print more than one chart
    data.addRows([
      [1,  37.8, 80.8],
      [2,  30.9, 69.5]
    ]);

    var options = {
      width: 500,
      height: 200
    };

    var chart = new google.charts.Line(document.getElementById('gchart_'+id_rec));
    chart.draw(data, options);
}

我在 html 代码中看到了我的 div，但第二个图表从未显示。

对于其中一张图表，<svg></svg> 应答器似乎是空的：

<div id="charts_cartes">
    <div id="gchart_39">
        <div style="position: relative; width: 500px; height: 200px;">
            <div
                style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                <svg width="500" height="200">
                    <defs><!-- [chart code well displayed but too long to write here] --></defs>
                </svg>
            </div>
        </div>
    </div>
    <div id="gchart_40">
        <div style="position: relative; width: 500px; height: 200px;">
            <div
                style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                <svg width="500" height="200">
                <defs></defs></svg>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

显示多个 material 图表时存在问题/错误。这个answer 应该有帮助...
感谢您的更新。我不认为这可能是谷歌可视化问题......

标签： javascript jquery charts google-visualization linechart

【解决方案1】：

修复了在 googlechart 的绘制函数中添加 setTimeout 的问题：

setTimeout(function(){ chart.draw(data, options); }, 1000);

如果几乎同时绘制多个图表，肯定会有一些冲突......

【讨论】：

【解决方案2】：

上述解决方案有效，但 setTimeout 只需 1 毫秒有效，因此，如果您使用某些显示逻辑动态生成图表，它不会在 1000 毫秒内加载。

所以这在 AngularJS 应用程序中也适用于我。

setTimeout(function(){ chart.draw(data, options); }, 1);

【讨论】：