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

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

问题在下面的示例中，工具提示始终显示3个系列，即使在该特定点只有两个系列

1） 如何确保序列仅在实际存在时才显示在工具提示中

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

JSFiddle：

小提琴中的同步代码：

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

    }
});

$（“#容器”）.bind（'mousemove touchtmove touchtstart'，函数（e）{
var图，
指向
我
事件
对于（i=0；i
不需要的行为是由
searchPoint
函数引起的-它返回最近的点，即使x位置与其他点不匹配。因此，如果序列只有一个点，它将始终被找到

解决方案：

手动选择要在工具提示中显示的点。格式化程序

：

        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;
        }

---

两个问题的演示：

---

更新： 我发布了第二个问题的错误答案。此代码隐藏了工具提示：

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

1） 如何确保序列仅在实际存在时才显示在工具提示中

不需要的行为是由

searchPoint

函数引起的-它返回最近的点，即使x位置与其他点不匹配。因此，如果序列只有一个点，它将始终被找到

解决方案：

手动选择要在工具提示中显示的点。格式化程序：

        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;
        }

---

两个问题的演示：

---

更新： 我发布了第二个问题的错误答案。此代码隐藏了工具提示：

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

---

这是我的解决方案。它对我非常有效。我根据

以下代码显示/隐藏工具提示，并确保它们在

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();
    }

  }
});

---

这是我的解决方案。它对我非常有效。我根据

以下代码显示/隐藏工具提示，并确保它们在

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();
    }

  }
});

---

非常感谢您的回答。还有一个问题，您能告诉我如何突出显示每个图表中的对应点吗？到目前为止，工具提示显示正确，但是这些点没有在三个图表中突出显示。非常感谢您的更新。很抱歉打扰您-即使移出图表，图表点似乎仍然亮起图表和工具提示关闭。除此之外，非常感谢您的帮助。没问题；）我更新了我的答案并进行了修改。

//撤消点突出显示后的3行。

注释修复了此问题。非常感谢您的回答。还有一个问题，您能告诉我如何突出显示每个图表中的相应点吗？到目前为止工具提示显示正确，但是三个图表中的点没有突出显示。非常感谢更新。很抱歉打扰您-即使移出图表并且工具提示关闭，图表点似乎仍然亮起。除此之外，非常感谢您的帮助。没问题；）我更新了我的答案并拉小提琴。后面3行er

//撤消点突出显示

注释修复此问题。