Chart.js v3柱状图hover时切换鼠标指针为pointer失效如何解决

问题根因 #

你的代码用的是 Chart.js v2 的语法规则，v3 版本做了不兼容的结构调整，两处配置错误导致效果不生效：

• onHover 回调参数结构变更：v3 中该回调第一个参数是原生事件对象，第二个参数才是当前 hover 命中的图表元素数组，原代码直接取 e[0] 无法拿到有效判断值
• 配置层级错误：v3 版本所有插件相关配置都要放到 options.plugins 节点下，包括 legend 配置；全局 hover 回调直接写在 options 根节点即可，不需要放到 options.hover 下

修复后完整代码 #

<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直接写在options根下，参数按v3规则取第二个元素数组判断
      onHover: function(e, activeElements) {
        var el = document.getElementById("myChart");
        el.style.cursor = activeElements.length ? "pointer" : "default";
      },
      plugins: {
        legend: {
          display: false,
          onHover: function (e) {
            e.target.style.cursor = 'pointer'
          },
          onLeave: function (e) {
            e.target.style.cursor = 'default'
          }
        }
      }
    }
  });
</script>

核心调整点 #

• 把原来 options.hover 下的 onHover 移到 options 根节点，回调的第二个参数 activeElements 就是当前 hover 命中的元素，判断数组长度是否大于0即可切换光标样式
• 把原来 options 下的 legend 配置整体移到 options.plugins.legend 节点下，适配v3的配置层级规则

内容的提问来源于stack exchange，提问作者user1188867