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

Posted 2023-02-16

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

【英文标题】：Chart.js remove label from legend for if dataset values

【发布时间】：2021-07-20 01:53:13

【问题描述】：

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

代码如下：

 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();

【参考方案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"  ></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>

【讨论】：

谢谢！像魅力一样工作！