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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11194527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 04:52:15  来源:igfitidea点击:

Highcharts - manually trigger hover event on a point

javascripthighcharts

提问by Scott At Rain

When you hover over a point in a Highcharts chart, you get a nice enlarged circle under you cursor (or other symbol). What I would like to do manually trigger that hover effect.

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

I know that I can manually trigger the mouseOver event on the point, but that doesn't give me the enlarged symbol on the chart that I am going for.

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

回答by Scott At Rain

I found the answer by looking at the source - call "setState('hover');" on the point that you want to be highlighted.

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

回答by JMarques

Just to add an important information:

只是添加一个重要信息:

For StockChart this solution doesn't work:

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

In this exampleyou have to replace this:

这个例子中,你必须替换这个:

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

to this:

对此:

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

One possible solution is available here.

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

回答by Do Async

Here is an example of how to select (hover) the last valid point in series programmatically:

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

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

完整的 JSFiddle 示例

enter image description here

在此处输入图片说明

回答by br4nnigan

To give a more direct answer (e.g. for then you don't have access to the highcharts instance):

给出更直接的答案(例如,因为那时您无权访问 highcharts 实例):

you need to create a mouseover event and give it proper pageX and pageY attributes before you trigger it.

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