javascript - Highslide JS > Highchart - 我该如何修改？

Question

我如何制作这个例子http://www.highcharts.com/demo/?example=spline-plot-bands&theme=default , live, 每秒更新一次，就像在这个例子中一样 http://www.highcharts.com/demo/?example=dynamic-update&theme=default .

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

我怎么可能实现它？

谢谢!

Answer 1

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

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 documentation看起来相当全面，每个示例(其中有很多)都有一个方便的“查看选项”按钮用于查看代码，因此通过一些研究进行设置应该相当简单。