Динамические цвета для круговой диаграммы

Question

Возьмите цвета из набора результатов JSON и примените их к круговой диаграмме ng2-диаграмм.

Каждый результат, который я возвращаю из базы данных, имеет значение и цвет.

Например, TicketType / NoБилетов / Цвет отчета

Концерт / 4 / # C44F44

Gamer Night / 10 / # F88912

Результаты могут быть разными, и у каждого разные цвета - IМне нужно иметь значение 'pieChartColors' из ng2-диаграмм, чтобы использовать эти динамические значения.

Я попытался заменить значение примера:

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