我每两秒动态更新一次图表,以使图表保持最新状态。此更新会导致图表反复闪烁。您可以在YouTube上找到一段简短的视频:https://youtu.be/bP8HYQBldMc
我已经废除了所有动画,以防止线路的任何移动,但它没有任何区别。
代码在typescript(anguar2项目)中,但Highcharts对象是纯JS:
this.chart["series"][0].setData(bellChart.productionData, false);
this.chart["xAxis"][0].setExtremes(bellChart.from, bellChart.until, false, false);
this.chart.redraw(false);
图表选项:
{
chart: {
type: 'line',
skipClone: true
},
title: {text: ''},
series: [{}],
credits: {enabled: false},
xAxis: {
type: 'datetime',
tickInterval: 14400 * 1000,
startOnTick: true,
endOnTick: true,
tickLength: 5,
tickWidth: 1,
lineColor: HighchartsThemes.LINE_COLOR,
tickColor: HighchartsThemes.LINE_COLOR,
labels: {
style: {
color: HighchartsThemes.LINE_COLOR,
fontSize: HighchartsThemes.FONT_SIZE
},
},
dateTimeLabelFormats: { // don't display the dummy year
millisecond: '%H',
second: '%H',
minute: '%H',
hour: '%H',
day: '%H',
month: '%H',
year: '%H'
},
},
yAxis: {
min: 0,
max: 100,
lineWidth: 1,
tickInterval: 25,
startOnTick: true,
endOnTick: true,
tickWidth: 1,
tickLength: 5,
title: {
text: null,
reserveSpace: false
},
gridLineColor: HighchartsThemes.LINE_COLOR,
gridLineDashStyle: "dash",
lineColor: HighchartsThemes.LINE_COLOR,
tickColor: HighchartsThemes.LINE_COLOR,
labels: {
align: 'right',
formatter: function () {
return this.value + " %";
},
style: {
color: HighchartsThemes.LINE_COLOR,
fontSize: HighchartsThemes.FONT_SIZE
},
},
},
legend: {
borderColor: HighchartsThemes.LINE_COLOR,
floating: true,
align: 'right',
verticalAlign: 'top'
},
tooltip: {enabled: false},
plotOptions: {
series: {
enableMouseTracking: false,
animation: false,
lineWidth: 1,
shadow: false,
marker: {enabled: false}
}
}
}