Highcharts 将多个图表上的工具提示与多个系列同步

Question

我正在尝试跨多个图表同步共享工具提示，每个图表都有多个系列。

问题是在下面的例子中，工具提示总是显示 3 系列，即使在那个特定点只有两个系列存在。

1) 如何确保一个系列仅在它实际存在时才显示在工具提示中？

2) 当我们移出图表时，如何确保工具提示已关闭？

JSFiddle：https ://jsfiddle.net/qoL7fx27/1/

小提琴同步代码：

$('#container').bind('mousemove touchmove touchstart', function (e) {
    var chart,
        point,
        i,
        event;

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

        chart.tooltip.refresh(points);

    }
});

Answer 1

这是我的解决方案。它非常适合我。我根据多个图表的同步进行了调整

演示在这里

以下代码显示/隐藏工具提示并确保它们在mousemove和上对齐mouseleave。

请注意，我发现我只需要找到搜索到的第一个点并使用它来显示/隐藏工具提示。这是因为我所有的时间序列都共享相同的 x 值。

$("#container").bind("mousemove mouseleave", function(e) {
  for (let i = 0; i < Highcharts.charts.length; ++i) {
    let hart = Highcharts.charts[i];
    let event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    let point;
    for (let j = 0; j < chart.series.length && !point; ++j) {
      point = chart.series[j].searchPoint(event, true);
    }
    if (!point) return;

    if (e.type === "mousemove") {
       point.onMouseOver();
      chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
    } else {
      point.onMouseOut();
      chart.tooltip.hide(point);
      chart.xAxis[0].hideCrosshair();
    }

  }
});

继续reset重置函数以禁止 HighCharts 重置点 - 我们接管控制。

Highcharts.Pointer.prototype.reset = function() {
  return undefined;
};