[英]How do you create a Hight Charts chart that updates every second with real data?
Is there a way to create a chart that updates every second with real data like this one ? 有没有一种方法来创建一个图表,每秒更新,像这样真实的数据一个 ? I couldn't figure it out. 我不知道。 I basically want a chart that updates every second with data in the past. 我基本上想要一个图表,该图表每秒更新一次过去的数据。 I updated a fiddle with my data but couldn't get it to work. 我用我的数据更新了一个小提琴 ,但无法正常工作。
Every example I found online deals with random data but I can't figure out how to use my data instead of random. 我在网上找到的每个示例都处理随机数据,但是我不知道该如何使用数据而不是随机数据。
I know it has something to do with this part of the code: 我知道这与这段代码有关:
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);
}
}
See my changes for you here: http://jsfiddle.net/KXpF7/3/ 在这里查看我为您所做的更改: http : //jsfiddle.net/KXpF7/3/
First, your data format is wrong since it's one dimension only, cannot be used to present (x,y) 首先,您的数据格式是错误的,因为它只是一维的,不能用于表示(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
You can have an array to put all of your historical data in a [x,y] format, which you can use in both categories in xAxis and series declaration. 您可以具有一个数组,以[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
In the beginning you show the first N data points of historicalData. 首先,您将显示historyData的前N个数据点。 (modify var defaultDataNum = 5;
according to your need) (根据您的需要修改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;
})()
}]
And get one more point from historicalData to display every 1 second afterwards. 然后从historyData再获得一点,然后每隔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);
That's the basic idea, please refer to my jsfiddle for all the details. 这是基本思想,所有细节请参考我的jsfiddle。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.