Highcharts 动态图如何替换横坐标

1 篇文章 0 订阅
0 篇文章 0 订阅

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值