angular - 饼图的动态颜色

Question

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

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

例如 TicketType / No of Tickets / Report Color

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

    }

组件.html

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

标签： angularng2-charts

Answer 1

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

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

看到这个堆栈闪电战