1

如何制作此示例http://www.highcharts.com/demo/?example=spline-plot-bands&theme=default，实时更新，每秒更新一次，就像在此示例中http://www.highcharts.com/ demo/?example=dynamic-update&theme=default。

第一个示例，带有绘图带的样条曲线，正是我所追求的；2 带有隐藏或显示一个或另一个选项的绘图图。唯一缺少的是让它们像另一个示例中那样实时更新。

我怎么可能实现它？

谢谢！

4

1 回答 1

2

第二个中的实时更新是通过在load事件中添加一个计时器来完成的chart

chart: {
    //...
    events: {
        load: function() {
            // set up the updating of the chart each second
            var series = this.series[0];
            setInterval(function() {
                var x = (new Date()).getTime(), // current time
                    y = Math.random();
                series.addPoint([x, y], true, true);
            }, 1000);
        }
    }
    //...
}

因此，当图表完成加载时，setInterval每 1000 毫秒（即每秒）调用一次提供的函数；的回调setInterval只是通过添加一个新点series.addPoint。

您需要做的就是添加一个load事件处理程序，该处理程序设置一个适当的setInterval调用来添加您的新点。在更现实的情况下，您将使用setTimeout启动 AJAX 调用以获取更多数据，然后在 AJAX 的成功回调中，您将添加新点并setTimeout再次调用以安排在另一秒后进行另一个 AJAX 调用（或任何时间间隔在您的应用程序中有效）。

Highcharts 文档看起来相当全面，每个示例（其中有很多）都有一个方便的“查看选项”按钮，用于查看代码，因此通过一些研究，设置应该相当简单。

于 2011-02-25T03:25:43.417 回答