[英]How do I change the colours of specific labels in ng2-charts?
I made a doughnut chart using ng2-charts in Angular 8. I have 3 labels in my doughnut chart, 'Passed', 'Failed' and 'Open'.我在 Angular 8 中使用 ng2-charts 制作了一个圆环图。我的圆环图中有 3 个标签,“通过”、“失败”和“打开”。 I want to set 'Green', 'Red' and 'Blue' for those labels respectively.我想分别为这些标签设置“绿色”、“红色”和“蓝色”。 How do I do this?我该怎么做呢? My compliance.component.html file我的 compliance.component.html 文件
<div>
<div>
<div style="display: block">
<canvas baseChart
[data]="doughnutChartData"
[labels]="doughnutChartLabels"
[chartType]="doughnutChartType"
[options]="doughnutChartOptions"
[colors]="doughnutChartColor">
</canvas>
</div>
</div>
</div>
My compliance.component.ts file我的 compliance.component.ts 文件
export class ComplianceComponent implements OnInit {
public doughnutChartLabels: Label[] = ['Passed', 'Open', 'Fail'];
public doughnutChartData: MultiDataSet = [
[30, 20, 50]
];
public doughnutChartType: ChartType = 'doughnut';
constructor() { }
ngOnInit() {
}
public doughnutChartColor: Array<any> = [
{ // first color
'Passed'-color:green;
'Failed'-color:red;
'Open'-color:blue;
}];
public doughnutChartOptions={
responsive: true
};
}
Thank you.谢谢你。
colors
must be defined as an array
of interface
Color
according to the following code snippet: colors
必须根据以下代码片段定义为interface
Color
array
:
import { Color } from 'ng2-charts';
...
public doughnutChartColor: Color[] = [
{ backgroundColor: 'green' },
{ backgroundColor: 'red' },
{ backgroundColor: 'blue' }
];
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.