角4：棒グラフの棒グラフで、ChartJSを使用して異なる色

Question

棒グラフの棒ごとに異なる色を設定したい。私はバックエンドのAPIから色を取得します。

は、私が試した：

<div> 
    <div style="display: block"> 
    <canvas class="dashboard-tile-chart" baseChart 
      [datasets]="barChartData" 
      [labels]="barChartLabels" 
      [options]="barChartOptions" 
      [colors]="barChartColors" 
      [legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas> 
    </div> 
</div> 

.componenet.tsは、すべてのヘルプは高く評価され

export class BarGraphComponent implements OnInit { 

    // initially setting some dummy colors: this works. 
    public barChartColors: Array<any> = [{ 
     backgroundColor: [ 
      '#5cb85c', 
      '#65C6BB', 
      '#1BBC9B', 
      '#f0ad4e', 
      '#d9534f', 
      '#5cb85c', 
      '#f0ad4e' 
     ] 
    }]; 

    // but when I try to set the colors dynamically like below it's not working. Dummy colors that I initially set are still showing 
    setGraphData() { 
     const colors = []; 
     this.vitalValues.forEach(value => { 
      colors.push(value.color); 
     }); 
     console.log('colors------'); 
     console.log(colors); 
     const barColors: Array<any> = [{ 
      backgroundColor: colors 
     }]; 

     this.barChartColors = barColors; 
    } 
} 

..

Answer 1

はあなたが試すことができます

public barChartColors: Array<any> = 
     [ 
      '#5cb85c', 
      '#65C6BB', 
      '#1BBC9B', 
      '#f0ad4e', 
      '#d9534f', 
      '#5cb85c', 
      '#f0ad4e' 
     ];