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

1）如何確保僅在工具提示中實際顯示某個系列時？

不必要的行為是由searchPoint函數引起的-即使x位置不與其他點匹配，它也會返回最近的點。 因此，如果該系列只有一點，那么總會找到它。

解：

手動選擇要顯示在tooltip.formatter點：

        formatter: function() {
          var outputString = '';

          this.points.forEach(function(point) {
            if (point.x === this.x) {
              outputString += "<span style='color:" + point.color + "'>\u25CF</span> " + point.series.name + ": <b>" + point.y + "</b><br/>";
            }
          }, this);
          return outputString;
        }

API參考： https ： //api.highcharts.com/highcharts/tooltip.formatter

---

2）當我們移出圖表時，如何確定工具提示已關閉？

通過刪除以下Highcharts.Pointer.prototype.reset行來恢復默認的Highcharts.Pointer.prototype.reset函數：

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

---

兩個問題的演示： https : //jsfiddle.net/BlackLabel/2mxxrk5n/

---

更新：

對於第二個問題，我發布了錯誤的答案。 此代碼隱藏了工具提示：

$('#container').bind('mouseout', function(e) {
  Highcharts.charts.forEach(function(chart) {
    chart.tooltip.hide();
    // undo point highlight
    chart.series.forEach(function(series) {
        series.points.forEach((point) => point.setState(''));
    });
  });
});

---

您能告訴我如何突出顯示每個圖表中的對應點嗎？ 到目前為止，工具提示可以正確顯示，但是在三個圖表中這些點仍未突出顯示

這段要點指出：

points.forEach(function(point_) {
  if (point_) {
    point_.highlight(e);
  }
}, this);

為了實現所需的行為，您必須提供用於過濾應突出顯示的點的邏輯。 這是一個針對此特定情況的非常簡化的示例：

// provide a logic for filtering points
if(points[0] && points[1].x > 0) {
    points.pop(); // remove the unwanted point
}

Answer 2

這是我的解決方案。 這對我來說是完美的。 我根據多個圖表的同步進行了調整

在這里演示

以下代碼顯示/隱藏了工具提示，並確保它們在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;
};