Можно установить цвет фона на кольцевую диаграмму с помощью Angular8 - PullRequest
Новая
       44

Можно установить цвет фона на кольцевую диаграмму с помощью Angular8

0 голосов
/ 07 мая 2020

Я пытаюсь динамически установить другой цвет фона в соответствии с ключом-значением массива, используя Angular8. Я объясняю свой код ниже. 

<div class="chart-wrapper">
   <canvas baseChart 
      [data]="orderdoughnutChartData"
      [labels]="orderdoughnutChartLabels"
      [colors]="doughnutColors"
      [chartType]="doughnutChartType">
  </canvas>
</div>


public orderdoughnutChartLabels:string[] = [];
public orderdoughnutChartData:number[] = [];
public doughnutChartType:string = 'doughnut';
showOrder: boolean = false;
  public donutColors: any =[];
this.orapi.getAllOrdersCount().subscribe((res: any) => {
      let arr = [];
      res['data'].forEach(element => {
        this.orderdoughnutChartLabels.push(element._id);
        this.orderdoughnutChartData.push(element.count);
        if(element._id === 'Shipped') {
      arr.push('rgb(255, 165, 0)');
    }else if(element._id === 'Delivered') {
      arr.push('rgb(60, 179, 113)');
    }else if(element._id === 'In-Process') {
      arr.push('rgb(106, 90, 205)');
    }else if(element._id === 'Pending') {
      arr.push('rgb(255, 0, 0)');
    }else if(element._id === 'Transit') {
      arr.push('rgb(238, 130, 238)');
    }else if(element._id === 'Re-Attempt') {
      arr.push('rgb(255,165,0)');
    }else if(element._id === 'Failed') {
      arr.push('rgb(255,0,0)');
    }else if(element._id === 'Packed') {
      arr.push('rgb(0.255.0)');
    }else{

    }
      });
      this.donutColors.push({'backgroundColor':arr});
      console.log('color', this.donutColors);
      this.showOrder = true;
    })

Здесь я устанавливаю цвет в соответствии с key name, но на выходе он не отражается и по-прежнему принимает цвет по умолчанию. Мне нужно установить фиксированный цвет согласно key-value.

...