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 = 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

这是我的解决方案。这对我来说是完美的。我根据Synchronisation of multiple charts

进行了调整

Demo here

以下代码显示/隐藏了工具提示，并确保它们在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;
};

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

2 个答案:

<强>更新