Highcharts 动态图如何替换横坐标
可以将代码贴在此处自行测试
https://jshare.com.cn/new
Highcharts.setOptions({
global: {
useUTC: false
}
});
function activeLastPointToolip(chart) {
var points = chart.series[0].points;
chart.tooltip.refresh(points[points.length -1]);
}
Highcharts.chart('container', {
chart: {
type: 'spline',
marginRight: 10,
events: {
load: function () {
var series = this.series[0],
chart = this;
var x = 8;
activeLastPointToolip(chart);
setInterval(function () {
// 当前时间
var y = Math.random();
x = x+1;// 随机值
series.addPoint([x, y], true, true);
activeLastPointToolip(chart);
}, 1000);
}
}
},
xAxis: { //x轴按时:分表示
categories: (function(){
var categories = [];
var minute = 0;
var second = 0;
for(minute;minute<24;minute++)
for(second;second<60;second++){
if(minute<10 && second<10)
categories.push('0'+minute+':'+'0'+second);
else if(minute<10 && second>=10)
categories.push('0'+minute+':'+second);
else if(minute>=10 && second<10)
categories.push(minute+':'+'0'+second);
else
categories.push(minute+':'+second);
if(minute == 23 && second == 59){
second = 0;
minute = 0;
}
}
return categories;
}())
},
series: [{
name: '随机数据',
data: (function () {
// 生成随机值
var data = [],
time = 0,
i;
for (i = 0; i <= 8; i += 1) {
data.push({
x: time+i,
y: Math.random()
});
}
return data;
}())
}]
});
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>