Highchart工具提示显示最近点

Question

我一直试图制作高图工具提示，以显示最近的点，因为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(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));
});

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

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(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>

Answer 2

为工具提示的常量顺序

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(p.x - 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 3

别忘了共享工具提示选项！

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