Highchart 工具提示显示最近点答案

【问题标题】：Highchart tooltip show nearest pointHighchart 工具提示显示最近点
【发布时间】：2015-03-04 06:45:17
【问题描述】：

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

它似乎在那里工作了一半，但是当您将鼠标悬停在某个位置时，它会显示重复的系列。我花了几个小时试图弄清楚这一点，任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery charts highcharts

【解决方案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>

【讨论】：

【解决方案2】：

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

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

到

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

谢谢你的解决方案！！！

【讨论】：

【解决方案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);

        });

【讨论】：

【解决方案4】：

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

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

【讨论】：