Chart JS 3柱状图顶部文本Hover闪烁问题及解决咨询

问题出在你依赖animation.onComplete钩子绘制柱子顶部的数值——鼠标hover柱子时，图表会触发重绘（比如高亮目标柱子），但onComplete仅在初始加载或图表更新的动画结束后执行，重绘过程中不会重新绘制文本，导致文本短暂消失后又出现，产生闪烁。

正确的做法是使用Chart.js的插件机制，通过afterDraw钩子来绘制文本，这个钩子会在每次图表绘制（包括hover、窗口缩放等所有重绘场景）完成后执行，保证文本始终显示：

const ctx = document.getElementById('myChart');

// 自定义插件：绘制柱子顶部数值
const valueLabelsPlugin = {
  id: 'valueLabels',
  afterDraw: (chart) => {
    const ctx = chart.ctx;
    ctx.textAlign = 'center';
    ctx.fillStyle = "#ffffff";
    ctx.textBaseline = 'bottom';
    
    chart.data.datasets.forEach((dataset, i) => {
      const meta = chart.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach((bar, index) => {
          const data = dataset.data[index];
          ctx.fillText(data, bar.x, bar.y - 5);
        });
      }
    });
  }
};

var myChart = new Chart(ctx, {
  plugins: [valueLabelsPlugin], // 注册插件
  data: {
    labels: ['21Q1','21Q2','21Q3','21Q4','22Q1','22Q2','22Q3','22Q4'],
    datasets: [
      {
          type: 'bar',
          label: 'Y Value',
          data: [2,3,4,4,5,7,5,4],
          borderWidth: 1,
          backgroundColor: '#1E77E5',
      },
    ],
  },
  options: {
      responsive: true,
      animation: {
          duration: 1000 // 可根据需求调整动画时长
      }
  }
});

修改说明 #

• 移除原animation.onComplete中的绘制逻辑，改用插件的afterDraw钩子
• 插件会覆盖所有图表绘制场景，确保hover时文本不会消失
• 保留了数据集隐藏判断，隐藏数据集时不会显示对应数值

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