Question

我有一个显示多行的图表。该图表是每单位时间药物浓度的变化，我想在各种情景中运行该图表，即实时，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（）应该执行以下操作......

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

Answer 1

如果您的timer();包含评论中的代码，则

(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/

使用Chart.js在Javascript中更新图表

1 个答案: