highChats 设置两两线共享数据显示在tooltip

先直接上代码
$('#container').highcharts({
    ...
    tooltip: {
<span style="white-space:pre">	</span>crosshairs: true, //显示焦点的十字线
<span style="white-space:pre">	</span>formatter: function() {
		//判断温湿度折线,偶为温度,奇为湿度,分别获取上一根折线和下一个折线数据
		var series1,series2,
		point1,point2;
		var point_index = this.point.index;//数据点的下标
                //我自己的相关联的线是奇偶(1,2)(3,4),其他需求请另写算法。大致不变
		if(this.series.index % 2 ==0){
		      series1 = this.series;
		      series2 = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
		      point1 = this.point;
		      point2 = series2.data[point_index];//获取第二条线的焦点
		}else{
		      series1 = $('#container').highcharts().series[this.series.index - 1];
		      series2 = this.series;
		      point1 = series1.data[point_index];
		      point2 = this.point;
		}
		            	
		//显示在tooltip的数据
		return '<b>'+ Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) +'</b><br>'+                
                        series1.name +': <b>'+ Highcharts.numberFormat(point1.y, 1) +'°C</b><br>' +
                        series2.name +': <b>'+ Highcharts.numberFormat(point2.y, 1) +'%</b>';                      
                }
                //添加第二个点的MouseOverCSS,就是焦点变大的那个显示
                 plotOptions: {
		 series: {
		  point: {
		        events: {
		        	mouseOver: function () {
			        	var point_index = this.index;//数据点的下标
					        if(this.series.index % 2 ==0){
					            	var series = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
							var point = series.data[point_index];
							//添加hover样式这个方式是自己写的。在下面
							point.onMouseOverCSS();
					         }else{
					            	var series = $('#container').highcharts().series[this.series.index - 1];//获取湿度数据
							var point = series.data[point_index];
						        //添加hover样式
							point.onMouseOverCSS();
					         }
				         },
				         mouseOut: function () {
			        		var point_index = this.index;//数据点的下标
					        if(this.series.index % 2 ==0){
					            var series = $('#container').highcharts().series[this.series.index + 1];//获取湿度数据
						    var point = series.data[point_index];
							//删除hover样式
						    point.onMouseOutCSS();
					        }else{
					            var series = $('#container').h
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值