Highchart工具提示显示最近点

我一直试图制作高图工具提示，以显示最近的点，因为x轴值未在不同系列中对齐。

这是我到目前为止所得到的

http://jsfiddle.net/Yw8hb/5/

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) { var args = arguments, points = args[1], point = points[0], chart = point.series.chart; // Loop over all the series of the chart Highcharts.each(chart.series, function(series) { // This one already exist if (series == point.series) return; var current, dist, distance = Number.MAX_VALUE; // Loop over all the points Highcharts.each(series.points, function(p) { // use the distance in X to determine the closest point dist = Math.abs(px - point.x); if (dist < distance) { distance = dist; current = p; } }); // Add the closest point to the array points.push(current); }); proceed.apply(this, [].slice.call(args, 1)); }); 

它似乎在那里工作了一半然而当你在某个地方hover它显示重复的系列。 我花了好几个小时试图解决这个问题，非常感谢任何帮助。

Answer 1

在插入之前，检查点数组是否包含刷新回调函数中的当前点。

 // Add the closest point to the array if(points.indexOf(current)==-1) points.push(current); 

 Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) { var args = arguments, points = args[1], point = points[0], chart = point.series.chart; // Loop over all the series of the chart Highcharts.each(chart.series, function(series) { // This one already exist if (series == point.series) return; var current, dist, distance = Number.MAX_VALUE; // Loop over all the points Highcharts.each(series.points, function(p) { // use the distance in X to determine the closest point dist = Math.abs(px - point.x); if (dist < distance) { distance = dist; current = p; } }); // Add the closest point to the array if(points.indexOf(current)==-1) points.push(current); }); proceed.apply(this, [].slice.call(args, 1)); }); $('#container').highcharts({ tooltip: { shared: true }, xAxis: { crosshair: { color: '#F70000' } }, series: [{ data: [{ x: 0.0, y: 1 }, { x: 1.0, y: 2 }, { x: 2.0, y: 3 }, { x: 3.0, y: 2 }, { x: 4.0, y: 1 }] }, { data: [{ x: 0.2, y: 0 }, { x: 1.2, y: 1 }, { x: 2.2, y: 1 }, { x: 3.2, y: 1 }, { x: 4.2, y: 2 }] }, { data: [{ x: 0.2, y: 5 }, { x: 1.2, y: 9 }, { x: 2.2, y: 4 }, { x: 3.2, y: 5 }, { x: 4.2, y: 3 }] }] }); 

 #container { min-width: 300px; max-width: 800px; height: 300px; margin: 1em auto; } 

Answer 2

如果您只想在工具提示中显示可见系列，请更改

  // This one already exist if (series == point.series) return; 

至

  // This one already exist if (series == point.series || series.visible==false) return; 

谢谢你的解决方案！

Answer 3

为了不断订购工具提示

 Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) { var args = arguments, points = args[1], point = points[0], chart = point.series.chart; // Loop over all the series of the chart Highcharts.each(chart.series, function (series) { // This one already exist if (series == point.series || series.visible == false) return; var current, dist, distance = Number.MAX_VALUE; // Loop over all the points Highcharts.each(series.points, function (p) { // use the distance in X to determine the closest point dist = Math.abs(px - point.x); if (dist < distance) { distance = dist; current = p; return; } }); // Add the closest point to the array if (points.indexOf(current) == -1) points.push(current); }); // for not changing the tooltip series order var tt = [].slice.call(args, 1); tt[0].sort(function (a, b) { if (a.color < b.color) return -1; if (a.color > b.color) return 1; return 0; }); proceed.apply(this, tt); }); 

Answer 4

不要忘记共享工具提示选项！

 options = { tooltip: { shared: true, ....