这是相关代码:http://jsfiddle.net/z24ysp8m/18/
$(function() {
var chartData = [100, 150, 170, 100.823, 100.823, 94.3796, 96.7395, 98.6239, 102.914, 100.331, 114.383, 110.577, 120.006, 123.887,
120, 160, 50, 60, 70, 100, 120, 160, 50, 60, 70, 100];
var timeStamps = [];
var dataToDisplay = []
var index = 1;
var chart1, chart2;
$('#b').click(function(){
timeStamps.push(new Date());
var buttonB = document.getElementById('b');
buttonB.disabled = true;
if(index <= chartData.length){
chart1.xAxis[0].setExtremes(index-1,index);
chart1.series[0].show();
setTimeout(function(){
if(index == 1){
chart1.series[0].setData([chartData[0]]);
}else{
chart1.series[0].setData(dataToDisplay);
}
chart1.series[0].addPoint(chartData[index]);
}, 1000);
setTimeout(function(){chart1.series[0].hide();}, 2000);
/* A new data point is added to the chart on the right
(two new data points when the index is 1). */
setTimeout(function(){
if(index === 1){
dataToDisplay.push(chartData[0]);
dataToDisplay.push(chartData[1]);
}else{
dataToDisplay.push(chartData[index]);
}
console.log(dataToDisplay);
chart2.series[0].setData(dataToDisplay);
index++;
}, 2000);
}
if(index < chartData.length - 1){
setTimeout(function(){buttonB.disabled = false;}, 2000);
}else{
setTimeout(function(){buttonB.style.visibility="hidden";}, 2000);
}
if(index == chartData.length - 2){
setTimeout(function(){document.getElementById('b').innerHTML = 'Last Period';}, 2000);
}
console.log(timeStamps);
})
Highcharts.setOptions({
lang: {
decimalPoint: ','
},
});
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
width: 170,
marginLeft: 74,
marginRight: 16,
marginBottom: 60,
events: {
load: function() {
this.xAxis[0].setExtremes(0,1);
}
}
},
title: {
text: ''
},
colors: [
'#0000ff',
],
xAxis: {
title: {
text: ''
},
gridLineWidth: 1
},
yAxis: {
title: {
text: 'Value'
},
min:40,
max:160,
tickPixelInterval: 20
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + 'GE';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
type: 'line',
width: 2002,
marginLeft: 55,
marginRight:3,
marginBottom: 60
},
colors: [
'#0000ff',
],
title: {
text: ''
},
xAxis: {
title: {
text: ''
},
gridLineWidth: 1,
startOnTick: true,
tickPixelInterval: 80,
min:0,
max:24
},
yAxis: {
title: {
text: 'Value'
},
min:40,
max:160,
tickPixelInterval: 20
},
plotOptions: {
line: {
marker: {
enabled: false
}
}
},
tooltip: {
formatter: function () {
return Highcharts.numberFormat(this.y, 2) + 'GE';
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
credits:{
enabled:false
},
series: [{
name: '',
data: []
}]
});
});
图表按照我想要的方式工作，除了第一次单击之外的所有按钮单击时，左侧的图表总是显示上一次模拟的趋势线一段时间，我想防止这种情况发生(即，当我第二次单击该按钮时，我想要的是左侧的图表应仅显示从周期 1 到周期 2 的动画线(x=1 的数据点显示在与周期 1 相对应的网格线上) ，然后向 x=2 的数据点绘制一条线。显示的是在所需的动画之前，有一个从周期 0 到 1 的线的闪回。)
我尝试过 redraw() 并放置了折线chart1.series[0].show();
在代码的不同部分。但在没有纠正问题的情况下，更改要么没有效果，要么产生其他不良影响。
有什么办法可以解决这个问题吗？
(我觉得和setExtreme方法有关系)
演示截图:
(注意:我对 JSFiddle 进行了一些更改，以使趋势更加可区分。)
最佳答案
您可以简单地使用 Highcharts 函数的参数!
From the documentation:
setExtremes (Number min, Number max, [Boolean redraw], [Mixed animation])Set the minimum and maximum of the axes after render time. If the startOnTick and endOnTick options are true, the minimum and maximum values are rounded off to the nearest tick. To prevent this, these options can be set to false before calling setExtremes. Also, setExtremes will not allow a range lower than the minRange option, which by default is the range of five points.
Parameters
- min: Number The new minimum value
- max: Number The new maximum value
- redraw: Boolean Defaults to true. Whether to redraw the chart or wait for an explicit call to chart.redraw().
- animation: Mixed Defaults to true. When true, the resize will be animated with default animation options. The animation can also be a configuration object with properties duration and easing.
以下是我在您的代码中所做的修改:
chart1.series[0].show();
chart1.xAxis[0].setExtremes(index-1,index,true,false);
//setTimeout(function(){
if(index == 1){
chart1.series[0].setData([chartData[0]]);
}else{
chart1.series[0].setData(dataToDisplay);
}
chart1.series[0].addPoint(chartData[index]);
//}, 1000);
setTimeout(function(){chart1.series[0].hide();}, 2000);
关于javascript - Highcharts : How to prevent the "flashback" in animation?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38990891/