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

最新推荐文章于 2023-12-01 16:24:44 发布

原创

最新推荐文章于 2023-12-01 16:24:44 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何通过分析highCharts源代码来设置两两线共享数据显示在tooltip上，特别提到了一些API文档中未包含的方法，如获取series和point的下标。作者分享了其学习过程，期望能为其他开发者节省时间，虽然语言表达略显简单，但力求易懂。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先直接上代码

$('#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').highcharts().series[this.series.index - 1];//获取湿度数据
							var point = series.data[point_index];
							//删除hover样式
							point.onMouseOu