自动生成饼图图例答案

【问题标题】：Auto Generating Pie Chart Legend自动生成饼图图例
【发布时间】：2018-08-14 11:05:16
【问题描述】：

我正在尝试在 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'],
    }],
  },
});

【问题讨论】：

标签： javascript pie-chart

【解决方案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'],
    }],      
  },
});

如果你去自动它就足以使这样的代码的功能。

【讨论】：

【解决方案2】：

根据文档，您可以在标签中使用过滤器参数

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

你可以做一个验证来验证数据，如果它是0你可以返回false

Filter a legend Item with Chartjs.org V2.7

【讨论】：