先直接上代码
$('#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