angular - 使用 Chartjs Angular 按值排序和隐藏图例项

Question

如果提供的值为 0，我想隐藏或不显示图例，并按升序排列项目

export class DoughnutChartComponent {

  doughnutChartLabels: Label[] = ['CR1', 'CR2', 'CR3', 'CR4', 'CR5', 'BOX', 'APP', 'Center 8', 'Center 9'];
  doughnutChartData: number [] = [55, 25, 20, 0, 54, 33, 0, 70, 88];
  doughnutChartOptions: ChartOptions = { legend: {
      display: true,
      position: 'right',
      fullWidth:false,
      reverse: false,
      labels: {
        usePointStyle: true,
        boxWidth: 10,
        padding: 7,
        fontSize: 18,
        fontColor: '#003457',
        fontStyle: 'bold',
      },
      },
     cutoutPercentage: 70,
    };
  doughnutChartType: ChartType = 'doughnut';
  doughnutChartColor: Colors[] = [{
    backgroundColor: [
      '#2E9FE0',
      '#9CCA32',
      '#255FCC',
      '#B746A6',
      '#FF9232',
      '#03B075',
      '#E5D844',
      '#45D2E4',
      '#E0489A'
    ]
  }] ;
}

是否可以。因为我没有得到任何解决方案。
感谢帮助

Answer 1

这个基本可以通过 Array.filter() 来实现，其次是 Array.sort() .
由于这需要在 doughnutChartLabels 上同时完成和 doughnutChartData ，您应该首先将标签和相应的值包装到对象中，并在最后解开这些对象，均使用 Array.map() .
为此，您可以添加以下 constructor至 DoughnutChartComponent .

constructor() {
  const tmp = doughnutChartData
    .map((v, i) => ({ l: doughnutChartLabels[i], v: v }))
    .filter(o => o.v > 0)
    .sort((o1, o2) => o1.v - o2.v);
  doughnutChartLabels = tmp.map(o => o.l);
  doughnutChartData = tmp.map(o => o.v);
}