饼图的动态颜色

Question

从JSON结果集中获取颜色并应用于ng2-chart饼图

我从数据库返回的每个结果都有一个值和一个颜色。

例如 票证类型/票证数量/报告颜色

音乐会/ 4 /＃C44F44

玩家之夜/ 10 /＃F88912

结果的数量不尽相同，每种颜色都有不同-我需要使用ng2-charts的'pieChartColors'值才能使用这些动态值。

我尝试替换示例值：

**pieChartColors: any[] = [{  backgroundColor: ['#3B55E6', '#EB4E36', '#43D29E', '#32CBD8', '#E8C63B', '#28C63B', '#38C63B', '#48C63B', '#58C63B', '#68C63B', '#78C63B'] }];**

使用

pieChartColors: any[] = [{ backgroundColor: this.arrColours }];

我尝试了其他方法，但是每次尝试都没有颜色或全灰。

component.ts

    this.arr = [];
    this.arrLabels = [];
    this.arrColours = [];

    for (let stat of this.ticketType) {
        this.arr.push(stat.noOfTickets);
        this.arrLabels.push(stat.ticketType);
        this.arrColours.push(stat.reportColour);

    }

component.html

   <canvas *ngIf='resultSet' baseChart height="70" 
    [data]="arr"
    [labels]="arrLabels" 
    [options]="PieChartOptions" 
    [colors]="pieChartColors"
    [chartType]="pieChartType">
    </canvas>

Answer 1

只需将新值推入标签，数据和颜色数组即可：

addSlice() {
  this.pieChartLabels.push('Concert');
  this.pieChartData.push(4);
  this.pieChartColors[0].backgroundColor.push('#C44F44');
}

查看此stackblitz