javascript - 动态绘制多个图表时不显示 Google Chart

Question

我通过 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>

Answer 1

修复了向 googlechart 的绘图函数添加 setTimeout 的问题:

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

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