作者:兔子狗530_772 | 来源:互联网 | 2022-12-26 10:34
我们在Angular 5应用程序中使用Chart.js(版本2.6.0)作为条形图,客户端希望我们为图表交互禁用悬停事件(他们只希望更改条形,并在用户使用时显示工具提示)点击一个栏)。
在条形图选项对象中,我们为events属性定义了以下内容:
events: ["touchstart","touchmove","click"]
禁用在条形图上的悬停事件。但是,现在,客户希望我们在用户将鼠标悬停在这些条之一上时将光标更改为指针,以便他们知道可以单击它,这是有效的点。我在SO上找到了几种解决方案,但是如果没有在events属性中添加“ mousemove”,那么似乎无法找到一种解决方法,该方法只能在整个图表上悬停交互。
真正让我感到困惑的是options.hover具有一个名为“ onHover”的事件属性,该事件属性具有一个回调,但是当发生任何已定义的事件(包括单击)时,它将触发。
http://www.chartjs.org/docs/latest/general/interactions/events.html
在没有重新启用悬停交互的情况下,是否有可能做到这一点?任何帮助将不胜感激。
1> Luca Fagioli..:
不知道它是否适用于您的情况,但是对于Chart.js 2.x,我使用此方法,该方法不使用该options.hover
属性。只需在选项中添加:
events: ['mousemove'], // this is needed, otherwise onHover is not fired
onHover: (event, chartElement) => {
event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}
希望能帮助到你。