javascript - 悬停在 highchart 中的同步图表上时线条淡出

Question

我有一个带有两个不同容器的同步 Highcharts 。我使用了一个脚本来同步图表。同步工作完美。我的第一个图表有 3 条线，第二个图表只有 1 条线。

When I hover the first chart, the third line fading out. When I disable the script for synchronisation it works fine.

这是我的同步脚本。

$('#container, #container2').bind('mousemove touchmove touchstart', function(e) {
        var chart,
        points,
        i,
        secSeriesIndex = 1;

        for (i = 0; i < Highcharts.charts.length; i++) {
            chart = Highcharts.charts[i];
            e = chart.pointer.normalize(e); // Find coordinates within the chart
            points = [chart.series[0].searchPoint(e, true), chart.series[1].searchPoint(e, true)]; // Get the hovered point

            if (points[0] && points[1]) {
                if (!points[0].series.visible) {
                    points.shift();
                    secSeriesIndex = 0;
                }
                if (!points[secSeriesIndex].series.visible) {
                    points.splice(secSeriesIndex,1);
                }
                if (points.length) {
                    chart.tooltip.refresh(points); // Show the tooltip
                    chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
                }
            }
        }
  });

This is the jsfiddle link for the same.

有人可以帮我解决这个问题吗？

Answer 1

您需要将所有悬停点添加到 points 数组中，而不仅仅是前两个:

for (i = 0; i < Highcharts.charts.length; i++) {
    chart = Highcharts.charts[i];
    e = chart.pointer.normalize(e); // Find coordinates within the chart    
    points = [];

    chart.series.forEach(function(s) {
        points.push(s.searchPoint(e, true));
    });

    ...
}

现场演示: https://jsfiddle.net/BlackLabel/goxm5q3e/