Highcharts - 手动触发点上的悬停事件

时间:2012-06-25 17:47:18

标签: javascript highcharts

当您将鼠标悬停在Highcharts图表中的某个点上时,您会在光标(或其他符号)下获得一个漂亮的放大圆圈。我想做什么手动触发悬停效果。

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

4 个答案:

答案 0 :(得分:31)

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

答案 1 :(得分:11)

只是添加一个重要信息:

对于StockChart,此解决方案不起作用:

this example中你必须替换它:

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

到此:

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

有一种可能的解决方案here

答案 2 :(得分: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

Full JSFiddle exapmle

enter image description here

答案 3 :(得分:1)

提供更直接的答案(例如,当时您无法访问highcharts实例):

你需要创建一个mouseover事件,并在触发它之前给它提供正确的pageX和pageY属性。