var myChart = Highcharts.chart('containerX', {
chart: {
type: 'spline',
//animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events: {
load: function () {
var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
var series = this.series[0];
socket.on('newnumber', function(msg) {
var x = (new Date()).getTime() // current time
var y = parseFloat(msg.number)
console.log(msg.number)
series.addPoint([x, y], true, true);
});
socket.on('newnumber2', function(msg2) {
var x = (new Date()).getTime() // current time
var y = parseFloat(msg2.number2)
console.log(msg2.number2)
series.addPoint([x, y], true, true);
});
}
},
},
...
series: [{
name: 'Random 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: Math.random()
});
}
return data;
}())
}]
在代码中,我同时通过flask-socketio接收两个不同的值。 msg.number
和 msg.number2
我可以仅使用一个系列在图表上正确显示值,例如msg.number
,但我想向图表中添加另一个系列,例如msg.number2
我应该如何修改代码来实现这个目标?
最佳答案
您需要在初始配置中添加另一个系列:
series: [{
...
}, {
...
}]
并在 load
事件中正确引用它:
events: {
load: function() {
...
var series1 = this.series[0];
var series2 = this.series[1];
socket.on('newnumber', function(msg) {
...
series1.addPoint([x, y], true, true);
});
socket.on('newnumber2', function(msg2) {
...
series2.addPoint([x, y], true, true);
});
}
}
<小时/>
关于javascript - 使用 HighCharts 动态更新同一图表上的两个系列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60840222/