javascript - Highcharts - 在一个点上手动触发悬停事件

Question

当您将鼠标悬停在 Highcharts 图表中的某个点上时，您的光标（或其他符号）下方会出现一个很好的放大圆圈。我想手动触发悬停效果。

我知道我可以在该点上手动触发 mouseOver 事件，但这并没有给我想要的图表上的放大符号。

Answer 1

我通过查看源找到了答案——调用“setState('hover');” 在您想要突出显示的点上。

Answer 2

只是添加一个重要信息：

对于 StockChart，此解决方案不起作用：

在此示例中，您必须替换它：

chart.tooltip.refresh(chart.series[0].data[i]);

对此：

chart.tooltip.refresh([chart.series[0].points[i]]);

此处提供了一种可能的解决方案。

Answer 3

以下是如何以编程方式选择（悬停）系列中最后一个有效点的示例：

  // Find last not-null point in data
  let last = data.indexOf(null) - 1;
  last = (last === -2) ? data.length - 1 : last;
  const lastPoint = this.series[0].points[last];

  // Trigger the hover event 
  lastPoint.setState('hover');
  lastPoint.state = '';  // You need this to fix hover bug
  this.tooltip.refresh(lastPoint); // Show tooltip

完整的 JSFiddle 示例

Answer 4

给出更直接的答案（例如，您无法访问 highcharts 实例）：

您需要创建一个 mouseover 事件并在触发它之前为其提供适当的 pageX 和 pageY 属性。