Question

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

当我将鼠标悬停在第一张图表上时，第三条线逐渐消失。当我禁用脚本进行同步，效果很好。

这是我的同步脚本。

$('#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/

悬停在Highchart中的同步图表上时，线条淡化

1 个答案: