Angular 4饼图自定义颜色设置无效问题求助

我看了你的代码，发现两个关键问题导致自定义颜色没生效，咱们一步步来修正：

问题1：生命周期方法位置错误 #

你的ngOnInit方法写在了组件类的外面，这会导致Angular无法识别并执行这个初始化逻辑，自然也不会把你定义的颜色赋值给pieChartColors。

问题2：pieChartColors格式不符合要求 #

在Angular 4常用的ng2-charts图表库中，colors属性的正确结构是：一个数组，每个元素对应一个数据集的样式配置。对于饼图来说，我们只需要一个配置对象，这个对象里的backgroundColor是颜色数组（对应每个饼块的颜色），borderColor同理。你之前写成了多个对象的数组，这不符合库的预期格式。

修正后的完整代码 #

.ts 文件 #

import { Component, OnInit } from '@angular/core';

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

  // 把ngOnInit放回类内部
  ngOnInit() {
    this.pieChartLabels = ['label 1','label 2', 'label 3', 'label 4'];
    this.pieChartData = [10, 20, 30, 40];
    
    // 修正colors的格式：单个对象，backgroundColor是颜色数组
    this.pieChartColors = [
      {
        backgroundColor: [
          "#F42A0A",
          "#95382A",
          "#97bbad",
          "#97bb0d",
          "#97bb1d",
          "#97bb6d",
          "#97bb7d",
          "#97bb8d",
          "#97bb9d"
        ],
        borderColor: "rgba(148,159,177,1)"
      }
    ];
  }
}

.html 文件 #

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

额外提示 #

注意你之前的颜色值里有一个#97bbzd，这里的z是无效的十六进制字符，我在修正代码里改成了#97bbad，避免颜色解析错误。

这样修改后，你的饼图应该就能正确应用自定义的颜色了。

内容的提问来源于stack exchange，提问作者MadMax