Highchart工具提示显示最近点 [英] Highchart tooltip show nearest point

问题描述

我一直在尝试让highchart工具提示显示最近的点，x轴的值在不同的系列中不一致。

这是我得到的到目前为止

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

  Highcharts.wrap（Highcharts.Tooltip.prototype，'refresh' {
 var args = arguments，
 points = args [1]，
 point = points [0]，
 chart = point.series.chart; 
 
 //循环所有的图表系列
 Highcharts.each（chart.series，function（series）{
 //这一个已经存在
 if（series == point。系列）返回; 
 
 var current，
 dist，
 distance = Number.MAX_VALUE; 
 //遍历所有点
 Highcharts.each series.points，function（p）{
 //使用X中的距离来确定最近的点
 dist = Math.abs（px  -  point.x）; 
 if（dist< distance）{
 distance = dist; 
 current = p; 
} 
}）; 
 
 //添加最接近数组的点
 points.push（current）; 
}）; 
 
 proceed.apply（this，[] .slice.call（args，1））; 
}）; 
  

这似乎是一半的工作，但是当你悬停在某个地方，它显示重复的系列。我花了几个小时试图找出任何帮助将非常感激。

解决方案

  //添加最接近数组的点
 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; //循环遍历图表的所有系列Highcharts.each chart.series，function（series）{//这个已经存在if（series == point.series）return; var current，dist，distance = Number.MAX_VALUE; //遍历所有点Highcharts.each函数（p）{//使用X中的距离来确定最近点dist = Math.abs（px-point.x）; if（dist    #container {min-width：300px; max-width：800px; height：300px; margin：1em auto;}  

 < script src = http://code.jquery.com/jquery-git.js\"> ;</script> ;<script src =http://code.highcharts.com/highcharts.js>< / script> < script src =http://code.highcharts.com/modules/exporting.js>< / script>< div id =container>< / div>  

I have been trying to make highchart tooltip to show the nearest point incase the x-axis value aren't align in different series.

This is what I got so far

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(p.x - 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));
});

It seems to be working half way there however when you hover in some spot it shows duplicated series. I have spent hours trying to figure this out any help would be very appreciated.

解决方案

Before insertion, check whether points array contains the current point in your refresh callback function.

// 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(p.x - 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;
}

<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

这篇关于Highchart工具提示显示最近点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！