这是关注的代码：user_send_packet (X-axis : datetime Y-axis : number)
$(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方法有关）
演示屏幕截图：http://jsfiddle.net/z24ysp8m/18/
（注意：我已经改变了JSFiddle以使趋势更加可分化。）
答案 0 :(得分：1)
您可以简单地使用Highcharts功能的参数！
setExtremes (Number min, Number max, [Boolean redraw], [Mixed animation])设置最小值和最大值 渲染时间后的轴。如果是startOnTick和endOnTick选项 如果为true，则将最小值和最大值四舍五入为 最接近的。为防止这种情况，可以将这些选项设置为false 在调用setExtremes之前。此外，setExtremes不允许范围 低于minRange选项，默认情况下为5 分。
<强>参数
- min ：Number新的最小值
- max ：Number新的最大值
- redraw ：Boolean默认为true。是否重绘图表或等待 显式调用chart.redraw（）。
- 动画：混合默认为 真正。如果为true，则调整大小将使用默认动画进行动画处理 选项。动画也可以是配置对象 属性持续时间和缓和。
以下是我在您的代码中所做的修改：
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);