使用图表在Javascript中更新图表。js

Question

我一直在使用图表。js图表。js文档

我有一张显示多条线的图表。该图是单位时间内药物浓度的变化图，我想在各种场景下运行该图，如实时、x2、x4、x8等，因此，当下一秒到来时，我希望该图使用新的计算数据进行更新，然后刷新/更新图表。

//simDur is the duration i want the simulation to run for eg 1hr/3600secs
for(t=0; t < simDur; t++)
{
    timer(); //function awaits here for the next second to arrive
    generateData(); //calculate the new data yArr;
    myLineChart.addData(yArr, t); //yArr is an array of Y values, t=time
    myLineChart.update();  //update the chart with the new added data
}

问题是图表在for循环完成之前不会刷新，我希望图表每秒显示更新的数据。

文档中说update（）应该执行以下操作。。。

在图表实例上调用update（）将使用任何更新的值重新渲染图表，允许您编辑多个现有点的值，然后在一个动画渲染循环中渲染这些点。

Answer 1

如果你的定时器（） 包含您评论中的代码，即。

(function Forever() {
    var now = new Date();
    var hh = now.getHours();
    var mm = now.getMinutes();
    var ss = now.getSeconds();
    var g_realTimeNow = (ss + (mm * 60) + (hh * 60 * 60));
    //convert to secs
    console.log("Global time: " + g_realTimeNow);
    setTimeout(Forever, 1000);
})();

这实际上并不等待setTimeout处理程序完成后再返回。因此，实际上，timer（）被无延迟地调用simDur次。

修改你的代码如下，你应该得到更接近你需要的东西（我已经使用了setInterval，但是你也可以使用setTimeout，但是它会稍微复杂一点）

var t = 0;
var interval = setInterval(function () {
    if (t >= simDur) {
        clearInterval(interval);
        return;
    }

    generateData(); //calculate the new data yArr;
    myLineChart.addData(yArr, t); //yArr is an array of Y values, t=time
    myLineChart.update();  //update the chart with the new added data

    t++;
}, 1000)

小提琴-http://jsfiddle.net/xhequLjw/