highchart多曲线tooltip补齐点

问题描述

用highchart画多条曲线时，tooltip设置为shared:true后，移动鼠标会显示相同x下的多个y，但要求y不能缺否则就会丢点。

运行效果

 

解决方法

当然可以通过后台将数据填充上，但最轻量级的解决方法是在formatter当遇到某y丢点时，自动取临近的前一个值显示。代码中还涉及到了浮点数小数位处理方法fixnumber。

tooltip: {
	shared: true,
	crosshairs: true,			
	formatter: function() {	
		var thisx = this.x, xtooltip;	
		var fixnumber = function(v){
			var fixedlen = 0;
			if(Math.abs(v) < 1000 &&  v !==0) 
				fixedlen = 3-Math.log(Math.abs(v))/Math.LN10;
			return v.toFixed(fixedlen);
		}
		if(typeof(thisx) === 'number'){
			xtooltip = fixnumber(thisx) + ':' ; 
		}
		else{
			xtooltip = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', thisx)+ ': ';
		}
		var result = '<b>'+ xtooltip +'</b><br/>';
		var allseries = [], i=0, n=0;
		if(this.points && this.points.length > 0){
			allseries = this.points[0].series.chart.series;
			n = allseries.length;
		}
		var getpointtooltip = function(point, series, result){
			var seriename = '<b style="color:' + series.color + '">'+ series.name +':</b>';
			var percent = '<br/>';//饼图或叠加柱状图的比例
			if(point.percentage){
				percent = ' 占比: '+point.percentage.toFixed(2)+'%<br/>';
			}
			if(!point.z){
				result += seriename + fixnumber(point.y) + percent;
			}
			else{
				result += seriename + x + fixnumber(point.y) + ', ' + fixnumber(point.z) + percent;	
			}
			return result;
		}
		var hasdataseries = {};
		Ext.Array.each(this.points,function(point){
			hasdataseries[point.series.name]=point;
		})
		Ext.Array.each(allseries, function(series_i){
			if(!hasdataseries[series_i.name]){
				var nearest = undefined;
				Ext.Array.each(series_i.data, function(point_i){
					if(point_i.x < thisx){
						nearest = point_i;
					}else{
						return false;
					}
				})
				if(nearest){
					result = getpointtooltip(nearest, series_i, result);
				}
			}else{
				result = getpointtooltip(hasdataseries[series_i.name], series_i, result);
			}
		})
		return result;
	}
}