饼图中的Chart.js ng2-charts颜色未显示

Question

我正在使用 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';

我的看法：

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

Answer 1

尝试类似以下内容...

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)']
}];
...

^{不是 'ng2-charts' 专业人士，但 afaik 这应该有效。}

Answer 2

通过*ngIf="pieChartLabels && pieChartData"在 HTML 模板中添加条件解决了这个问题：

<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>