禁用悬停（mousemove）事件后，将光标更改为Chart.js条形图上的指针吗？

Question

我们在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

在没有重新启用悬停交互的情况下，是否有可能做到这一点？任何帮助将不胜感激。

Answer 1

不知道它是否适用于您的情况，但是对于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';
}

希望能帮助到你。

Answer 2

根据 @Luca Fagioli 的回答，就我而言，我不想禁用图表中的点击事件，所以我添加了：

events: ['mousemove', 'click'],
onHover: (event, chartElement) => {
  event.target.style.cursor = chartElement[0] ? 'pointer' : 'default';
}

现在您在图表上有了光标，您也希望光标在图例中 - 如果它们是可点击的 - 因此在图例设置玩具保持中添加：

 onHover: (event) => {
    event.target.style.cursor = 'pointer';
 }