在禁用hover(mousemove)事件时将光标更改为Chart.js条形图上的指针？

0yycz8jy 于 2022-11-06 发布在 Chart.js

关注(0)|答案(4)|浏览(157)

我们在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
这是可能的，甚至没有重新启用悬停互动一般？任何帮助将不胜感激。

chart.js

来源：https://stackoverflow.com/questions/49040768/changing-cursor-to-pointer-on-chart-js-bar-chart-when-hover-mousemove-event-is

4条答案

按热度按时间

to94eoyn1#

不确定它是否适用于您的情况，但在Chart.js 2.x中，我使用了这种方法，它不使用options.hover属性。

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

希望能有所帮助。

赞(0）回复(0）举报 2022-11-06

hgtggwj02#

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

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

现在你有一个光标在图表上，你想光标在图例太-如果他们是可点击的-所以在图例设置玩具持有添加：

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

赞(0）回复(0）举报 2022-11-06

dy2hfwbg3#

对于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';
        }
      }
    }
  }
}

赞(0）回复(0）举报 2022-11-06

ilmyapht4#

这几乎是5年前的问题了，使用ChartJS的3.x.x版本，我们只需要声明一些事件处理程序，如onHover、onClick，并定义tooltip的事件处理程序，如events: ['click']。
下面是一个工作片段：
第一个