淘先锋技术网

首页 1 2 3 4 5 6 7

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>