Javascript Chart.js ng2图表饼图中的颜色不显示

我使用的是ng-2图表，虽然我可以正确显示饼图，但我无法更改不同饼图切片的颜色

似乎存在一个错误，饼图的所有部分都得到了对象中声明的第一种颜色（在本例中为红色）

我的component.ts看起来像：

public pieChartColors:Array<any> = [
        { 
            backgroundColor: 'red',
            borderColor: 'rgba(135,206,250,1)',
        },
        { 
            backgroundColor: 'yellow',
            borderColor: 'rgba(106,90,205,1)',
        },
        { 
            backgroundColor: 'rgba(148,159,177,0.2)',
            borderColor: 'rgba(148,159,177,1)',

        }
    ];

     // Pie
  public pieChartLabels:string[] = ['First Set', 'Sales', 'Mail'];
  public pieChartData:number[] = [300, 500, 100];
  public pieChartType:string = 'pie';

公共颜色：数组=[
{ 
背景颜色：“红色”，
边框颜色：“rgba（135206250,1）”，
},
{ 
背景颜色：“黄色”，
边框颜色：“rgba（106,90205,1）”，
},
{ 
背景颜色：“rgba（148159177,0.2）”，
边框颜色：“rgba（148159177,1）”，
}
];
//馅饼
公共标签：字符串[]=['First Set'、'Sales'、'Mail']；
公共数据：数字[]=[300500100]；
公共pieChartType:string='pie'；

我的看法是：

  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          [colors]="pieChartColors"></canvas>

---

尝试以下方法

public pieChartColors: Array < any > = [{
   backgroundColor: ['red', 'yellow', 'rgba(148,159,177,0.2)'],
   borderColor: ['rgba(135,206,250,1)', 'rgba(106,90,205,1)', 'rgba(148,159,177,1)']
}];
...

公共颜色：数组=[{
背景颜色：[“红色”、“黄色”、“rgba（148159177,0.2）”，
边框颜色：['rgba（135206250,1）''rgba（106,90205,1）''rgba（148159177,1）'
}];
...

---

不是“ng2图表”专业版，但这应该可以使用。

通过在html中添加

*ngIf=“pieChartLabels&&pieChartData”

指令解决了此问题

<div class="card">
       <div class="card-header">
            Pie Chart
       </div>
          <div class="card-body">
            <div class="chart-wrapper"  *ngIf="pieChartLabels && pieChartData">
              <canvas baseChart class="chart"
              [data]="pieChartData"
              [labels]="pieChartLabels"
              [chartType]="pieChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
         </div>
      </div>
 </div>

饼图

我同意上述答案，如果有人需要，我愿意提供详细信息。我的例子是饼图，它也适用于其他人

步骤1：

在component.ts文件中添加以下内容

    public pieChartOptions: ChartOptions = {
 responsive: true,
 };

 public pieChartLabels: Label[] = [['Not', 'Completed'], ['Completed', 'Tasks'], 'Pending Tasks'];
 public pieChartData: SingleDataSet = [300, 500, 100];
 public pieChartType: ChartType = 'pie';
 public pieChartLegend = true;
 public pieChartPlugins = [];

 public pieChartColors: Array < any > = [{
   backgroundColor: ['#fc5858', '#19d863', '#fdf57d'],
   borderColor: ['rgba(252, 235, 89, 0.2)', 'rgba(77, 152, 202, 0.2)', 'rgba(241, 107, 119, 0.2)']
 }];


 chartClicked(e){
   console.log(e);
   console.log('=========Chart clicked============');
 }
 chartHovered(e){
  console.log(e);
  console.log('=========Chart hovered============');
 }

public-pieChartOptions:ChartOptions={
回答：是的，
};
公共图表标签：标签[]=[['Not'，'Completed'，['Completed'，'Tasks']，'Pending Tasks']；
公共数据：SingleDataSet=[300500100]；
公共pieChartType:ChartType='pie'；
公共图例=真；
公共插件=[]；
公共颜色：数组=[{
背景颜色：[#fc5858'、#19d863'、#fdf57d']，
边框颜色：['rgba（252235,89,0.2）''rgba（77152202,0.2）''rgba（241107119,0.2）'
}];
图表（e）{
控制台日志（e）；
console.log（'=============单击的图表================='）；
}
图表悬停（e）{
控制台日志（e）；
console.log（'==========================================='）；
}

步骤2：

您的component.html应该如下所示：

   <canvas baseChart 
            [data]="pieChartData" 
            [labels]="pieChartLabels" 
            [chartType]="pieChartType"
            [options]="pieChartOptions"
            [plugins]="pieChartPlugins"
            [legend]="pieChartLegend"
            [colors]="pieChartColors"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"
            >
          </canvas>

很有效，非常感谢！为什么文档会说只有一个对象数组呢？我想，这是针对多个数据集的。但是，由于您使用的是单个数据集，因此应该使用单个对象和多个背景/边框颜色的数组，这些颜色和伪数据放在.ts文件中，所有这些都可以正常工作。在开始使用来自服务器的数据后，我不得不使用这种方法来避免所有标签都涂成相同的浅灰色！谢谢萨拉丁！