ng2-charts / 如何以编程方式在特定标签上设置甜甜圈/饼图颜色?

Question

我有一个交易列表，这些交易以图表标签的形式返回status，count作为图表数据返回。我的标签经常['cancelled', 'completed', 'rejected']，但有时数据返回['cancelled', 'completed', 'error', 'pending', 'rejected]。如何为每个标签设置不同的颜色？

到目前为止我的代码：

statusCount: StatusCount[] = [];
loaded = false;
// Doughnut
public chartData = [];
public chartLabels = [];
public chartType = 'doughnut';
public chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'right'
}
};
private chartColors: any[] = [{ backgroundColor: ['#E91E63', '#00BFA5', '#ff1744'] }];
constructor(
private apiService: ApiService
) { 
}
ngOnInit() {
this.getTransactionStatus();
}
getTransactionStatus() {
this.apiService.getTransactionStatus().subscribe((res: any) => {
this.statusCount = res;
for (const i of this.statusCount) {
this.chartData.push(i.count);
this.chartLabels.push(i.status);
}
this.loaded = true;
}, error => {
console.log(error);
});
}

Answer 1

您也可以在getTransactionStatus方法中设置chartColors。

它看起来像这样(假设您的statusCount对象具有 color 属性：

public chartColors: any[] = [{ backgroundColor: [] }];
constructor(
private apiService: ApiService
) { 
}
ngOnInit() {
this.getTransactionStatus();
}
getTransactionStatus() {
this.apiService.getTransactionStatus().subscribe((res: any) => {
this.statusCount = res;
for (const i of this.statusCount) {
this.chartData.push(i.count);
this.chartLabels.push(i.status);
this.chartColors[0].backgroundColor.push(i.color);
}
this.loaded = true;
}, error => {
console.log(error);
});
}

请注意，您的chartColors对象应该是公共的(如chartData、chartLabelse等(才能对 HTML 可见(它将在开发模式下工作，但除非它是公共的，否则不会构建。