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

【问题标题】：Cursor pointer change onhover not working in chartjsv3悬停时光标指针更改在图表 js v3 中不起作用
【发布时间】：2021-09-03 13:04:17
【问题描述】：

当我们将鼠标悬停在使用 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>

我该如何解决这个问题？

【问题讨论】：

标签： javascript chart.js chart.jsv3

【解决方案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>

【讨论】：