如果提供的值为 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'
]
}] ;
}
是否可以。因为我没有得到任何解决方案。感谢帮助
最佳答案
这个基本可以通过 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);
}
关于angular - 使用 Chartjs Angular 按值排序和隐藏图例项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66917011/