Chart.js点击图例可隐藏柱状图但对应数据值无法隐藏问题求助

问题根因 #

你当前的实现未在绘制自定义数值标注时判断对应数据集的隐藏状态，点击图例隐藏柱状图时，绘制逻辑仍会为所有数据集生成标注，因此出现不同步的问题。

修复方案 #

修改options.animation.onComplete回调逻辑，新增数据集隐藏状态判断，隐藏的数据集跳过标注绘制即可，修改后的完整代码如下：

var ctx = document.getElementById("canvas").getContext("2d");
var nomi = [2017, 2018, 2019];

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: nomi,
    datasets: [{
        label: 'PP PERVENUTI',
        data: [50, 30, 45],
        backgroundColor: "#8A0808",
        fill: false,
        borderColor: "#8A0808",
        borderWidth: 3
      },
      {
        label: 'PP EVASI',
        data: [60, 45, 12],
        backgroundColor: "#0B610B",
        fill: false,
        borderColor: "#0B610B",
        borderWidth: 3
      },
      {
        label: 'PI PERVENUTI',
        data: [20, 25, 35],
        backgroundColor: "#8A0886",
        fill: false,
        borderColor: "#8A0886",
        borderWidth: 3
      },
      {
        label: 'PI EVASI',
        data: [10, 20, 30],
        backgroundColor: "#0404B4",
        fill: false,
        borderColor: "#0404B4",
        borderWidth: 3
      }
    ]
  },
  options: {
    legend: {
      display: true,
      position: "bottom"
    },
    hover: {
      animationDuration: 0
    },
    animation: {
      onComplete: function() {
        var ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "black";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        this.data.datasets.forEach(function(dataset) {
          for (var key in dataset._meta) {
            // 新增：隐藏的数据集跳过标注绘制
            if (dataset._meta[key].hidden) continue;
            for (var i = 0; i < dataset.data.length; i++) {
              var model = dataset._meta[key].data[i]._model;
              ctx.fillText(dataset.data[i], model.x, model.y - 5);
            }
          }
        });
      }
    }
  }
});

Vue项目适配注意事项 #

• 直接将修改后的配置传入你项目中使用的Chart组件即可生效
• 组件销毁时记得调用Chart实例的destroy()方法，避免内存泄漏

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