在 Angular 4 中更改饼图的颜色答案

【问题标题】：Changing the color of Pie Charts in Angular 4在 Angular 4 中更改饼图的颜色
【发布时间】：2023-03-15 04:08:01
【问题描述】：

我想更改 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>

【问题讨论】：

标签： javascript css angular pie-chart

【解决方案1】：

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

【讨论】：

【解决方案2】：

颜色应该像Array<Any>一样提供所以你应该改变

this.pieChartColors = ["#ff9900","#ff9900","#97bbcd","#97bbcd"];

到这样的事情：

this.pieChartColors = [
{backgroundColor:"#ff9900", ...},
{backgroundColor:"#ff9900", ...},
{backgroundColor:"#97bbcd", ...},
{backgroundColor:"#97bbcd", ...}];

来自ng2-charts的颜色结构示例：

Array<any> = [
    { // grey
      backgroundColor: 'rgba(148,159,177,0.2)',
      borderColor: 'rgba(148,159,177,1)',
      pointBackgroundColor: 'rgba(148,159,177,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
    },

【讨论】：

谢谢@MikkaRin。但现在它从数组的第一个元素中获取所有颜色。如果我给第一个背景色设置红色，所有其他的都采用相同的红色。
@myadsmail 检查颜色 #97bbzd - 这不是颜色定义。它应该只包含 0123456789ABCDEF 符号
我也得到了相同的第一种颜色。 @MikkaRin