[英]Highcharts Multiple Series Dynamic Column Chart Update
我在一個項目上使用圖表,在創建多個動態更新的數據系列時遇到麻煩。 我不確定自己在做什么錯,下面是示例數據和代碼。 請注意,以下代碼適用於單個數據系列,但是我需要對多個數據系列進行哪些更改?
樣本數據
{"BleedEnthalpy":{"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076},"BypassRatio":{ "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016}}
碼
Highcharts.chart('other', {
chart: {
type: 'column',
backgroundColor: null,
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var iter=0;
// set up the updating of the chart each second
var series = this.series[0];
myInterval = setInterval(function() {
var len = Object.keys(BleedEnthalpy).length;
if (iter < len) {
series.addPoint([(new Date()).getTime(), BleedEnthalpy[iter]], true, true);
iter++;
} else {
clearInterval(myInterval);
}
}, 1000);
}
}
},
title: {
text: null
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 4);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
rangeSelector: {
enabled: false
},
navigator: {
enabled: false
},
scrollbar: {
enabled: false
},
series: [{
name: 'R data',
data: (function () {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -19; i <= 0; i += 1) {
data.push({
x: time + i * 1000,
y: BleedEnthalpy
});
}
return data;}()) }] });
您必須創建另一個系列,然后以與第一個系列相同的方式向其添加點。
如果您有兩組數據:
var BleedEnthalpy = {"0":1.495308553,"1":0.4441197889,"2":0.8609127688,"3":1.0913122458,"4":1.2085670076};
var BypassRatio = { "0":0.0602932228,"1":0.0020143045,"2":0.1111420462,"3":0.0017957639,"4":0.0665590016};
創建兩個系列:
series: [{
...
}, {
...
}]
然后在時間間隔回調中將點添加到兩個系列中
load: function() {
var iter = 0;
// set up the updating of the chart each second
var series = this.series[0],
series2 = this.series[1];
myInterval = setInterval(function() {
var len = Object.keys(BleedEnthalpy).length;
var len2 = Object.keys(BypassRatio).length,
x = new Date().getTime();
if (iter < len) {
series.addPoint([x, BleedEnthalpy[iter]], false, true);
series2.addPoint([x, BypassRatio[iter]], true, true);
iter++;
} else {
clearInterval(myInterval);
}
}, 1000);
}
第二個y軸不是必需的,但是如果系列具有不同的比例,它將很有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.