Chart.js取消选择时图表上的值不会消失

Question

我有一个折线图，其中的值是可见的（我已经使用了网站上其他帖子中的代码）。

但是，如果我取消选择一个参数，只有该行消失但不是它的值。你能帮助我吗？这是一个非常好的图书馆。

这是我的代码：

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

var myChart = new Chart(ctx, {
    type: 'line',
    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 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);
                }
            }
        });
    }
}
		
    }
});

这是结果：

未被选中

未选择

Answer 1

这主要是因为在过滤图例时再次调用animation.oncomplete事件。

您需要额外检查此dataset._meta[0].$filler.visible != false才能仅显示可见数据集的值。

下面是更正的代码或小提琴供您参考 - > https://jsfiddle.net/x164L2z9/

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

var myChart = new Chart(ctx, {
  type: 'line',
  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) {
          if (dataset._meta[0].$filler.visible != false) {
            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);
              }
            }
          }

        });
      }
    }

  }
});