如何使 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告诉光标变成指针。有关更多信息，请访问此处了解其他光标类型，并访问此处了解悬停选择器。

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