如何更改 ChartJS 3 中饼图段悬停的光标？答案

【问题标题】：How can I change the cursor on pie chart segment hover in ChartJS 3?如何更改 ChartJS 3 中饼图段悬停的光标？
【发布时间】：2021-12-02 04:47:03
【问题描述】：

在类似于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';
    }
  }
}

那里的数据如下所示：

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

【问题讨论】：

标签： javascript html canvas chart.js

【解决方案1】：

您可以从具有画布的事件中获取图表实例，您可以在该画布上定位鼠标，如下所示：

const options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    }]
  },
  options: {
    onHover: (evt, activeEls) => {
      activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.1/chart.js"></script>
</body>

【讨论】：

非常好。谢谢。我的错误是误解了三元语句的目的。没有它，整个画布都会获得光标样式，这是我遇到的一个问题。