我遇到的问题是,与蓝线相比,黑线正在做一些时髦的东西。如果你在中间或其他地方滚动(使用底部滚动工具),你可以清楚地看到黑线正在改变它的形状,而蓝线保持其形状,奇怪。仅当您使用滚动工具时才会发生这种情况。
如何防止黑线改变其形状?复制此代码并将其替换为JSfiddle以查看问题:
$(function () {
Highcharts.setOptions({
global : {
useUTC : false
}
});
// Create the chart
$('#container').highcharts('StockChart', {
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.round(Math.random() * 100);
series.addPoint([x, y], true, true);
}, 1000);
var series1 = this.series[1];
setInterval(function () {
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series1.addPoint([x, y], true, true);
}, 1000);
}
}
},
rangeSelector: {
buttons: [{
count: 1,
type: 'minute',
text: '1M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 0
},
title : {
text : 'Live random data'
},
exporting: {
enabled: false
},
series : [{
name : 'diagram1',
data : (function () {
// generate an array of random data
var data1 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data1.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data1;
}())
},
{
name : 'diagram2',
data : (function () {
// generate an array of random data
var data2 = [], time = (new Date()).getTime(), i;
for (i = -999; i <= 0; i += 1) {
data2.push([
time + i * 1000,
Math.round(Math.random() * 100)
]);
}
return data2;
}())
}]
});
});
我唯一做的就是在图表中添加一条额外的动态线(黑色)。这是没有黑线的原始代码。 Review original code
答案 0 :(得分:0)
黑线移动的原因是图表的重绘和动画功能。出于某种原因,第一个系列(蓝线)在调用 addPoint
后不会显示动画,因此您无法看到该动作。 addPoint
函数中的第二个参数是 redraw
。将第二个系列(黑色线条)设置为false将在更新点时停止移动:
series1.addPoint([x, y], false, true);
这里是DEMO。