Highchart 工具提示显示最近点

Question

我一直在尝试制作 highchart 工具提示以显示最近的点，以防 x 轴值在不同系列中不对齐。

这是我目前得到的

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

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

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

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

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

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

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

Highchart 工具提示显示最近点

Highchart tooltip show nearest point

javascript

jquery

charts

highcharts