html 如何在ChartJS 3中更改饼图段上的光标悬停?

wnrlj8wa  于 2022-12-09  发布在  其他
关注(0)|答案(2)|浏览(153)

在类似于Changing cursor to pointer on Chart.js bar chart when hover (mousemove) event is disabled?的情况下,我尝试在悬停时改变光标。然而,在我的情况下,它是在饼图的分区上,而不是标签上。我们在点击每个分区时导航到相关的页面。
对于版本2,我们执行了以下操作:

options: {
  hover: {
    onHover: function(ev, el) {
      ev.target.style.cursor = el[0] ? 'pointer' : 'default';
    }
  }
}

不过,这在v3中已经不起作用了。原生元素似乎不可用。我已经在事件的可用数据中搜索过了,但找不到实际的元素。
以下是我最近的尝试:

options: {
  onHover: function(e) {
    e.native.target.style.cursor = 'pointer';
  }
}

我也尝试过通过activeEls

options: {
  onHover: function(e, activeEls) {
    if (activeEls.length) {
      activeEls[0].style.cursor = 'pointer';
    }
  }
}

数据如下所示:

如何访问段元素以应用样式?

zlhcx6iw

zlhcx6iw1#

您可以从事件中获取图表示例,该事件具有可将鼠标定位到其上的画布,如下所示:
第一个

wydwbb8l

wydwbb8l2#

对于使用ChartJS 4的用户,如果遇到此问题,则无法像以前的版本一样找到元素。从3.x版本开始,您可以直接访问onHover中的chart对象。
options.onClick和options.onHover现在接收图表示例作为第三个参数
迁移指南3.x
要将光标更改为指针,可以执行如下操作:

onHover: (event: ChartEvent, chartElement: ActiveElement[], chart) => {
          chartElement.length > 0 ? chart.canvas.style.cursor = 'pointer' : chart.canvas.style.cursor = 'default';
},

应该可以

相关问题