如何让Chart.js V3.7.0 中的整个<canvas> 元素悬停时显示光标为指针？

Question

当我将鼠标悬停在 canvas 元素上时，如何使它显示光标样式为 pointer。

HTML:

<canvas id="myChart"></canvas>

我都试过了：

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

并且：

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

但是运气不好。

图片：

总而言之，我希望光标在整个图表上具有与指针相同的样式，而不仅仅是在图片中的红点上。（带黄色的红点，是我希望我的光标看起来像一个指针的点的一个例子。）

提前致谢！

Answer 1

在CSS中，您需要canvas:hover{cursor: pointer}。当光标悬停在元素上时，canvas:hover 将运行里面的代码。 cursor: pointer 会告诉光标变成一个指针。如需更多信息，请前往 here for other cursor types and here for hover selector.

或者如果您没有 CSS 文件，您可以这样做：<canvas id="myChart" style="cursor: pointer"></canvas> 。这将做与上面解释的相同的事情。

如何让Chart.js V3.7.0 中的整个<canvas> 元素悬停时显示光标为指针？

How to make the whole <canvas> element in Chart.js V3.7.0 display cursor as pointer on hover?

javascript

chart.js

chart.js3