Question

我们正在使用Chart.js（版本2.6.0）作为Angular 5应用程序中的条形图，客户端希望我们禁用图表交互的悬停事件（他们只希望更改栏并显示工具提示当用户点击栏时。）

在条形图选项对象中，我们为events属性定义了以下内容：

events: ["touchstart","touchmove","click"]

禁用条形图上的悬停事件。然而，现在，当用户将鼠标悬停在其中一个条上时，客户端希望我们将光标更改为指针，以便他们知道可以单击它，这是一个有效点。我已经在SO上找到了几个解决方案，但是我似乎无法在不将“mousemove”添加到events属性的情况下找到一种方法，只是在整个图表上启用了悬停交互。

真正令我困惑的是，options.hover有一个名为“onHover”的事件属性，它有一个回调函数，但是当发生任何已定义的事件时它会触发，包括点击。

http://www.chartjs.org/docs/latest/general/interactions/events.html

一般情况下，如果不重新启用悬停交互，这是否可行？任何帮助将不胜感激。

Answer 1

不确定是否适用于您的情况，但是对于Chart.js 2.x，我使用此方法，该方法不使用lst = [1, 2 ,3]属性。只需将其添加到选项中即可：

lst = [[1], [2], [3]]

希望有帮助。

Answer 2

基于@Luca Fagioli的回答，就我而言，我不想禁用图表中的点击事件，因此我添加了：

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

现在您在图表上有一个光标，您也希望光标在图例中-如果可以单击，则在图例设置中，按住add键即可：

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

Answer 3

对于版本 > 3.x 您可以在 native

下找到 target

options: {
  plugins : {
    legend: {   
      labels: {
        onHover: function (e) {
          e.native.target.style.cursor = 'pointer';
        },
        onLeave: function (e) {
          e.native.target.style.cursor = 'default';
        }
      }
    }
  }
}

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

3 个答案: