时间戳

首页 > 解决方案 > 悬停在highchart的同步图表上时线褪色

javascript - 悬停在highchart的同步图表上时线褪色

问题描述

我有一个带有两个不同容器的同步高图。我使用脚本来同步图表。同步工作完美。我的第一个图表有 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
                }
            }
        }
  });

这是相同的 jsfiddle 链接。

有人可以帮我吗？

标签： javascriptjquerychartshighcharts

解决方案

您需要将所有悬停点添加到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/

推荐阅读