单击图例时，条形图隐藏没有问题，但数据值未隐藏在 charts.js 中

Question

我可以在点击图例时隐藏条形图，但在 charts.js 中不隐藏条形图的值我无法在点击图例时隐藏数据值，只有条形图被隐藏了

我在下面分享了js fiddle代码link

这里是js fiddle https://jsfiddle.net/npyvw1L8/

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';
debugger
        this.data.datasets.forEach(function(dataset) {
          
            for (var i = 0; i < dataset.data.length; i++) {
              for (var key in dataset._meta) {
                var model = dataset._meta\[key\].data\[i\]._model;
                ctx.fillText(dataset.data\[i\], model.x, model.y - 5);
              }
            }
          

        });
      }
    }

  }
});

我正在使用 Vue 并已实现此图表，我们将不胜感激

Answer 1

您可以获得该数据集的元信息并检查它是否隐藏，如果隐藏则跳过渲染循环：

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;
        const chart = this.chart;
        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, i) {

          if (chart.getDatasetMeta(i).hidden) {
            return;
          }

          for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
              var model = dataset._meta[key].data[i]._model;
              ctx.fillText(dataset.data[i], model.x, model.y - 5);
            }
          }
        });
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="canvas"></canvas>

单击图例时，条形图隐藏没有问题，但数据值未隐藏在 charts.js 中

On click of legend, bar is hiding without issue but data value is not hiding in charts.js

html

javascript

chart.js