如何在Highchart中动态更改鼠标事件函数?



我使用Highchart networkgraph作为有向图。

我希望用户能够在节点悬停突出显示从开始节点的最短路径。我还有一些复选框,它们将突出显示从开始到指定节点的最短节点。我已经设法做到了。但我有一些问题是,在选择一个复选框,我想"禁用"BFS算法,保持高亮的路径,让用户探索节点(每个节点都有一个工具提示,以及悬停)

我做了一个小的演示来展示我的问题。演示

我已经尝试禁用所有状态(非活动,悬停,选定)和更新每个标记与node.update()方法,但没有成功。我也试过改变观点。将chartOptions状态中的事件设置为undefined或其他函数,但是默认状态会干扰该功能。我已经没有主意了。

提前感谢。

对于禁用所有状态,您可以使用enableMouseTracking: false,它将关闭所有状态。https://api.highcharts.com/highcharts/plotOptions.networkgraph.enableMouseTracking

const updateSeries = () => {
setChartOptions({
series: [
{ 
enableMouseTracking: false,
data: [Math.random() * 5, 2, 1] 
},
{ 
data: [Math.random() * 5, 2, 1] 
},
]
});
};

https://stackblitz.com/edit/react-ewhvow?file=index.js

另一个选项是在一系列事件中添加一个事件。mouseOut事件。鼠标悬停,然后将标记的状态更改为可见或不可见。

https://jsfiddle.net/BlackLabel/shxo8Lj6/

最新更新