悬停时光标指针更改在图表 js v3 中不起作用

Question

当我们将鼠标悬停在使用 chartjs(v3) 库创建的条形图上时，我试图将光标更改为指针。但是我不能用下面的代码来做到这一点：

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div style="width:600px">
<canvas id="myChart"></canvas>
</div>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    plugins: [ChartDataLabels],
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      hover: {
        onHover: function(e) {
          //$("#canvas1").css("cursor", e[0] ? "pointer" : "default");
            var el = document.getElementById("myChart");
            el.style.cursor = e[0] ? "pointer" : "default";
        }
      },
      legend: {
        display: false,
        onHover: function (e) {
          e.target.style.cursor = 'pointer'
        },
        onLeave: function (e) {
          e.target.style.cursor = 'default'
        }
      },
    }
  });
</script>

我该如何解决这个问题？

Answer 1

没什么不对，onHover 不属于 hover 子选项部分，甚至不要认为有悬停子选项部分。此外，事件不是数组而是对象，您希望第二个参数包含所有活动元素。

此外，还需要在 plugins 部分配置图例。禁用图例并使用 onHover 和 onLeave 回调也没有意义

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<div style="width:600px">
  <canvas id="myChart"></canvas>
</div>
<script>
  var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    plugins: [ChartDataLabels],
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      onHover: function(e, activeEls) {
        //$("#canvas1").css("cursor", e[0] ? "pointer" : "default");
        var el = document.getElementById("myChart");
        el.style.cursor = activeEls[0] ? "pointer" : "default";
      },
      plugins: {legend: {
        display: false,
        onHover: function(e) {
          e.target.style.cursor = 'pointer'
        },
        onLeave: function(e) {
          e.target.style.cursor = 'default'
        }
      },}
    }
  });
</script>

悬停时光标指针更改在图表 js v3 中不起作用

Cursor pointer change onhover not working in chartjsv3

javascript

chart.js

chart.jsv3