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

Question

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

那里的数据是这样的：

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

Answer 1

您可以从具有 canvas 的事件中获取图表实例，您可以像这样在其上定位鼠标：

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>

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

How can I change the cursor on pie chart segment hover in ChartJS 3?

javascript

html

canvas

chart.js