Chart.js 3.x版本如何实现悬停数据标签时修改鼠标光标为pointer

失效原因 #

你之前在datalabels的enter/leave事件中直接修改光标样式，会被Chart.js原生的onHover事件后续触发时覆盖，只有当数据标签位置同时命中数据点的悬停范围时，才会碰巧生效，这就是你看到部分场景偶现效果的原因。

稳定实现方案 #

核心思路是将光标样式的修改统一收敛到Chart.js的onHover事件中处理，datalabels的事件仅负责维护「是否悬停在数据标签上」的状态，避免事件冲突导致的样式覆盖。

步骤1：维护数据标签悬停状态

如果是单个图表，可直接定义外层作用域变量；如果是多图表实例，建议将状态挂载到对应图表实例的自定义属性上，避免状态冲突。

步骤2：修改datalabels配置

仅在enter/leave事件中更新悬停状态，不用直接修改光标：

plugins: {
  datalabels: {
    listeners: {
      enter: (context) => {
        // 单图表场景可直接修改外层作用域变量：isDataLabelHovered = true
        // 多图表场景：将状态挂载到当前图表实例
        context.chart._isDataLabelHovered = true;
      },
      leave: (context) => {
        // 单图表场景可直接修改外层作用域变量：isDataLabelHovered = false
        context.chart._isDataLabelHovered = false;
      },
      // 保留你原有其他配置
      click: ({ datasetIndex, dataIndex }) => {
        setTileActive(report.id);
        populateDrills(report.id, reportGroup, report.data.dataset[datasetIndex].values[dataIndex]);
        executeScroll();
        return;
      },
      color: (context) => {
        return context.hovered ? 'green' : null;
      }
    }
  }
}

步骤3：调整原生onHover配置

优先判断数据标签悬停状态，再走原有数据点悬停的逻辑：

options: {
  onHover: (eve, legendItems, chartElement) => {
    if (_.get(eve, 'native.target.style')) {
      const chart = chartElement.chart;
      // 优先判断是否悬停在数据标签上
      if (chart._isDataLabelHovered) {
        eve.native.target.style.cursor = 'pointer';
      } else {
        // 保留原有数据点悬停的光标逻辑
        eve.native.target.style.cursor = legendItems[0] ? 'pointer' : 'default';
      }
    }
  }
}

该方案所有光标修改逻辑统一，不存在事件冲突覆盖的问题，所有图表类型都能稳定生效。

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