Question

根据我一年前的问题Highchart tooltip show nearest point

当两个或更多个系列的长度不相等时，显示工具提示中的最近点

然而，当您在图表周围移动鼠标时，您可以看到系列的顺序正在切换，十字准线将返回和第四。我在这里录制了一段快速视频

http://recordit.co/PxgJ8COnhF（在你赢得的视频中没有注意到十字线虫）

这里是jsfiddle https://jsfiddle.net/ittikorns/ygscLp3h/4/

的示例

Highcharts.wrap(Highcharts.Tooltip.prototype, 'refresh', function (proceed) {

    var args = arguments,
        points = args[1],
        point = points[0];
        if (typeof points[0] !== "undefined") {
            chart = point.series.chart;         
        } else {
            chart = points;
        }

        // 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;
                }
            });

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

        proceed.apply(this, [].slice.call(args, 1));

});   


$(function () {

    $('#container').highcharts({

 title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            crosshair: true,
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C',
            shared: true,
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }]        

    });
});

Answer 1

我认为这一切都取决于你的点数组中点的顺序。现在它并不总是一样的。您可以添加排序方法，使用它们所属系列的顺序对您的点进行排序。看看这段代码：

var compare = function (a, b) {
    if (a.series._i < b.series._i) {
      return -1
    } else if (a.series._i > b.series._i) {
      return 1
    }
    return 0
}

在这里你可以看到一个如何工作的例子： https://jsfiddle.net/ygscLp3h/5/

在这里你可以找到我所做的改变：

points = points.sort(compare);
proceed.apply(this, [].slice.call(args, 1));

如您所见，我在应用标准功能之前添加了排序功能。

致以最诚挚的问候，

显示最近点的Highcharts会导致闪烁的十字准线和奇怪的顺序

1 个答案: