Chart.js 从图例中删除数据集值的标签

Question

我有一个包含多个数据集的图表。如果数据集中的所有值都为空，我希望图例中的数据集标签不可见。我找到了一些解决方案，但只有在初始配置中声明了数据时它们才有效。就我而言，它是动态更新的。

代码如下：

 self.initGraph = function () {

 ctxWell = document.getElementById("wellChart").getContext('2d');
                if (wellChart != undefined)
                    wellChart.destroy();

                wellChart = new Chart(ctxWell, {
                    type: 'line',
                    data: {
                        labels: [],
                        datasets: [
                            {
                                backgroundColor: reportColor.Green,
                                borderColor: reportColor.Green,
                                label: 'Motor Frequency Hz',
                                yAxisID: 'y-axis-2',
                                data: [],
                                borderWidth: 1,
                                pointRadius: 0,
                                fill: false
                            },
                            {
                                backgroundColor: reportColor.Turquoise,
                                borderColor: reportColor.Turquoise,
                                label: 'Pump Discharge Pressure ' + helpers.getListSelectedValue(self.dischargePressureID(), self.pressureList()),
                                yAxisID: 'y-axis-1',
                                data: [],
                                borderWidth: 1,
                                pointRadius: 0,
                                fill: false
                            }
                            ,
        ]
                    },
                    options: {
                        maintainAspectRatio: false,
                        animation: {
                            duration: 0
                        },

                        scales: {
                            yAxes: [
                            {
                                id: 'y-axis-1',
                                // stacked: true,
                                 scaleLabel: {
                                    display: true,
                                    fontSize: 18,
                                     labelString: helpers.getListSelectedValue(self.intakePressureID(), self.pressureList())
                                 },
                                ticks: {
                                    beginAtZero: true
                                }
                            },

                            {
                                id: 'y-axis-2',
                                position: 'right',
                                display: self.checkAxis(),
                                scaleLabel: {
                                    display: self.checkAxis(),
                                    fontSize: 18,
                                    labelString: "Hz, " + helpers.getListSelectedValue(self.motorTemperatureID(), self.temperatureList())
                                },
                                ticks: {
                                    beginAtZero: true
                                }
                            }
                            ]
                        },
                        elements: {
                            line: {
                                tension: 0.000001
                            }
                        },
                        legend: {
                            display: true,
                            onClick: wellChartLegendClick,
                        
                            }
                          
                        },
                      
                    }
                });
            wellChart.update();
            };

            self.updateWellDaily = function () {
                var chart = wellChart;
                chart.data.labels = [];
                for (var j = 0; j < chart.data.datasets.length; j++) {
                    chart.data.datasets[j].data = [];
                }

                for (var i = 0; i < self.wellResults().length; i++) {
                    chart.data.labels.push(self.wellResults()[i].reportedTime);
                    chart.data.datasets[0].data.push(self.wellResults()[i].motorFrequency);
                    chart.data.datasets[1].data.push(self.wellResults()[i].pumpDischargePressure);
                    
                }
                chart.update();

            };


     self.initGraph();
     self.updateWellDaily();

Answer 1

可以使用图例过滤器功能，如果您告诉它隐藏数据集中所有数据为零的标签，它将动态更新，请参见示例：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 0],
        borderWidth: 1,
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      },
      {
        label: '# of Counts',
        data: [1, 2, 3,4,5,2],
        borderWidth: 1,
        backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
      }
    ]
  },
  options: {
    plugins: {
      legend: {
        labels: {
          filter: (legendItem, chartData) => (!chartData.datasets[legendItem.datasetIndex].data.every(item => item === 0))
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

document.getElementById("tt").addEventListener("click", () => {
  chart.data.datasets[1].data = [0, 0, 0, 0, 0, 0];
  chart.update()
});

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <button id="tt">
    change data
  </button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.js" integrity="sha512-LlFvdZpYhQdASf4aZfSpmyHD6+waYVfJRwfJrBgki7/Uh+TXMLFYcKMRim65+o3lFsfk20vrK9sJDute7BUAUw==" crossorigin="anonymous"></script>
</body>