Angular 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'
        ];