如何创建每秒更新真实数据的Hight Charts图表

How do you create a Hight Charts chart that updates every second with real data?

本文关键字：数据 真实 Hight 图表 Charts 更新 何创建 创建      更新时间：2023-10-01

有没有一种方法可以创建一个每秒用真实数据更新的图表，比如这样的图表？我想不通。我基本上想要一个每秒钟都用过去的数据更新的图表。我更新了一些数据，但无法使其发挥作用。

我在网上发现的每个例子都涉及随机数据，但我不知道如何使用我的数据而不是随机数据。

我知道这与代码的这一部分有关：

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);
  }
}

请在此处查看我的更改：http://jsfiddle.net/KXpF7/3/

首先，你的数据格式是错误的，因为它只是一维的，不能用来呈现（x，y）

data: [[3,11,0,3,4,40,2,11,1,5,40,12,11,40,1,40,12,2,3,2,1,12,1,0,1,15,1,4,12,0,4,5,4,12,15,12,1,2,12,2,3,10,4,15,5,4,12,11,0,15,4,40,4,15,1,4,4,40,12,15,1,0,0,5,11,12,15,0,2,4,11]]; // wrong format

您可以使用一个数组以[x，y]格式放置所有历史数据，可以在xAxis和系列声明中的两个类别中使用该数组。

var historicalData = [['2013-11-20 15:00:00',3],['2013-11-20 16:00:00',11],['2013-11-20 17:00:00',0],['2013-11-20 18:00:00',3],['2013-11-20 19:00:00',4],['2013-11-20 20:00:00',40],['2013-11-20 21:00:00',2],['2013-11-20 22:00:00',11],['2013-11-20 23:00:00',1],['2013-11-21 00:00:00',5],['2013-11-21 01:00:00',40]]; // finish the rest data by yourself

在开头，您显示了historicalData的前N个数据点。（根据需要修改var defaultDataNum = 5;）

        series: [{
            name: 'Real data',
            data: (function() {
                var data = [];
                // display the first defaultDataNum points in the beginning
                for (var i = 0; i < defaultDataNum; i++) {
                    data.push(historicalData[i]);
                }
                return data;
            })()
        }]

然后从historicalData中再获取一个点，每隔1秒显示一次。

        var intervalId = setInterval(function() {
            series.addPoint(historicalData[currentDataPos], true, true);
            currentDataPos++;
            // stop update when finish display all data
            if(currentDataPos == historicalData.length)
               clearInterval(intervalId);
        }, 1000);

这是基本的想法，请参阅我的jsfiddle了解所有细节。

相关文章：