饼图的动态颜色答案

【问题标题】：Dynamic Colours For Pie Chart饼图的动态颜色
【发布时间】：2019-03-31 16:18:00
【问题描述】：

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

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

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

音乐会 / 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 }];

我尝试过其他方法，但每次尝试要么没有颜色，要么全部变灰。

组件.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>

【问题讨论】：

标签： angular ng2-charts

【解决方案1】：

只需将新值推送到标签、数据和颜色数组中：

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

看到这个stackblitz

【讨论】：