javascript - 在 Angular 4 中更改饼图的颜色

Question

我想更改 Angular 4 中饼图的默认颜色。我的代码很长，但这是我遵循但无法正常工作的结构。

.ts 文件:

// .ts file

export class InfoComponent implements OnInit {
    pieChartLabels: string[];
    pieChartData: number[];
    pieChartType: string = 'pie';
    pieChartLegend: boolean = false;
    pieChartColors: any[];
}

ngOnInit() {
    this.pieChartLabels = ['label 1','label 2', 'label 3', 'label 4', ...];
    this.pieChartData = [data 1, data 2, data 3, .... ];
    this.pieChartColors =
        [
            {backgroundColor:"#F42A0A",borderColor: "rgba(148,159,177,1)" },
            {backgroundColor:"#95382A",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bbzd",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bbad",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb0d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb1d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb6d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb7d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb8d",borderColor: "rgba(148,159,177,1)"},
            {backgroundColor:"#97bb9d",borderColor: "rgba(148,159,177,1)"}
        ];
    
    
// .html file


<canvas style="margin-top: 10px; margin-bottom: 10px;" baseChart [data]="pieChartData"
                        [labels]="pieChartLabels" [chartType]="pieChartType"
                        [legend]="pieChartLegend" [colors]="pieChartColors">
</canvas>






    
    
    

Answer 1

通过从 ChartsModule 导入“ng2-charts”解决了这个问题。