Chart.js点击图例项后柱状图隐藏但柱上数值未隐藏如何处理

• 你目前的数值标注是手动在canvas上绘制的，整套绘制逻辑完全没判断对应数据集的可见状态，不管数据集有没有被图例藏起来，都会把所有数值全画上去
• 原绘制逻辑只在初始渲染的动画走完时执行一次，点击图例切换柱体显隐后，根本没触发画布重绘流程，之前画上去的旧数值不会被清掉
• 代码里还有几个容易踩的小坑：
  • HTML里canvas的id是bar-chart-grouped2，但初始化代码里选的是bar-chart-grouped，id对不上根本加载不对画布
  • 好几个数据集的label都重复写成"Total_Back log"，会导致图例显示串号、点击匹配错数据集
  • 你在legend配置里写了onClick: null，这会直接覆盖Chart.js默认的图例点击处理逻辑，正常情况下点图例根本不会有任何隐藏反应——如果你现在点图例柱体确实能藏，要么是这个配置没生效，要么是你自己额外绑了点击事件，这种情况下如果点完不手动触发重绘，标注永远不会跟着变。
  • 原代码里的ctx.response = true;是无效代码，canvas上下文根本没有这个属性，写了也没任何效果，可以直接删掉。

1. 先把基础错误改了
   • 统一HTML和JS里的canvas id，保证能正确选中图表元素
   • 把重复的数据集label改成对应业务的唯一名称，避免图例交互混乱
   • 把legend配置里的onClick: null删掉，恢复Chart.js默认的图例点击切换逻辑；如果需要自定义点击行为，一定要在切换完数据集的显隐状态后，手动调用图表实例的update()方法触发重绘
2. 改数值标注的绘制逻辑，加上可见状态判断
   原来animation.onComplete里的循环逻辑要加个校验：拿到每个数据集的元信息后，先看是不是被隐藏了，如果是就直接跳过，不要往下画数值。改完的核心代码块如下：

   animation: {
       onComplete: function () {
           const chartInstance = this.chart;
           const ctx = chartInstance.ctx;
           ctx.textAlign = "center";
           ctx.font = "bold Arial";
           
           this.data.datasets.forEach((dataset, i) => {
               const meta = chartInstance.controller.getDatasetMeta(i);
               // 被图例隐藏的数据集直接跳过，不画对应数值
               if (meta.hidden) return;
               
               meta.data.forEach((bar, index) => {
                   ctx.save();
                   ctx.translate(bar._model.x, bar._model.y - 20);
                   ctx.rotate(-0.5 * Math.PI);
                   ctx.fillText(dataset.data[index], 0, 0);
                   ctx.restore();
               });
           });
       }
   }
   

3. 效果验证
   改完之后点图例隐藏柱体的时候，图表会自动重绘：先把画布上之前画的所有内容清掉，再画原生的柱体、坐标轴，最后只给当前可见的数据集画数值标注，实现柱体和数值同步显隐的效果。

补充提示：如果用的是Chart.js v3以上的版本，要把legend、animation这类配置挪到options.plugins的分组下，适配新版本的配置结构才能生效。

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