自動生成餅圖圖例

Question

我正在嘗試用JavaScript創建一個餅圖。 我希望此圖表在圖例中僅顯示非零的標簽。

有誰知道如何做到這一點？

這是我到目前為止的代碼。 當前，餅圖的圖例顯示了所有可能的12個標簽，即使其中8個標簽的值為零。 最終將從數據庫中填充“數據”，因此，這是一個自動化過程非常重要。

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Astronomica", "Deuteronic", "Floral", "Galactic","Celestrial","Heliosphere","Jupiter","Interstella","Koronis","Eclipse,"Borealis","Lunatic"],
    datasets: [{
      data: [12.21, 15.58, 11.25, 8.32],
      backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
    }],
  },
});

Answer 1

您可以在使用數據之前對其進行管理。

var ctx = document.getElementById("myPieChart");
var input_lables = ["Astronomica" , "Deuteronic", "Floral", "Galactic", "Celestrial", "Heliosphere", "Jupiter", "Interstella","Koronis", "Eclipse", "Borealis", "Lunatic"];
var input_values = [12.21, 15.58, 11.25, 8.32];
var output_lables = [];
var output_values = [];
for(var i=0;i<input_lables.length;i++){
     if(!values[i]){
           output_lables.push(input_lables[i]);
           output_values.push(input_values[i]);
     }        
}      
var myPieChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: output_lables,
    datasets: [{
      data: output_values,
      backgroundColor: ['#007bff', '#dc3545', '#ffc107', '#28a745'],
    }],      
  },
});      

如果您要自動執行此操作，則只需執行如下代碼即可。

Answer 2

根據文檔，您可以在標簽中使用filter參數

http://www.chartjs.org/docs/latest/configuration/legend.html

您可以進行驗證以驗證數據，如果為0，則可以返回false

使用Chartjs.org V2.7過濾圖例項