Angular 2 ng2图表甜甜圈更改段颜色

这是一个与之相关的问题

我正在尝试用甜甜圈图表创建组件，并传递输入参数color来设置甜甜圈颜色段。我正在用ngOnInit初始化图表。颜色为HoverBackgroundColor更改，但不为backgroundColor更改。我错过什么了吗

    import {Component, OnInit, Input} from '@angular/core';

@Component({
    selector: 'donut-medium',
    templateUrl: './donut-medium.component.html',
    styleUrls: ['./donut-medium.component.css']
})
export class DonutMediumComponent implements OnInit {

    @Input() color: any;
    @Input() percentage: number;
    @Input() text1: string;
    @Input() text2: string;
    colors: any[]=[];

    // Doughnut
    public doughnutChartLabels: string[] = [];
    //public doughnutChartData: number[] = [];
    public doughnutChartType: string ;



    public doughnutChartOptions: any;
    public doughnutChartDatasets: any[];

    // events
    public chartClicked(e: any): void {
        console.log(e);
    }

    public chartHovered(e: any): void {
        console.log(e);
    }


    ngOnInit() {
        console.log('color', this.color);
        console.log('percentage', this.percentage);
        console.log('text1', this.text1);
        console.log('text2', this.text2);

        //this.colors = [];
        this.doughnutChartLabels = [];
       // this.doughnutChartData= [];
        this.doughnutChartType = 'doughnut';
        this.doughnutChartDatasets = [
            {
                data: [this.percentage, 100-this.percentage],
                options: this.doughnutChartOptions,
                borderColor: [],
                backgroundColor: [
                    this.color,
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    this.color,
                    "#dadada"
                ]
            }
        ]

        this.doughnutChartOptions = {
            tooltips: {
                enabled: false
            },
            cutoutPercentage: 85,
            elements: {
                center: {
                    text: this.text1,
                    text2: this.text2 ,
                    text3: "RANK",
                    fontColor: '#000',
                    fontFamily: "CalibreWeb, 'Helvetica Neue', Arial ",
                    fontSize: 36,
                    fontStyle: 'normal'
                }
            }
        };


    }


    constructor() {

    }

    ngAfterViewInit() {
        Chart.pluginService.register({
            afterDraw: function (chart) {

                if (chart.config.options.elements.center) {
                    var helpers = Chart.helpers;
                    var centerX = (chart.chartArea.left + chart.chartArea.right) / 2;
                    var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2;

                    var ctx = chart.chart.ctx;
                    ctx.save();
                    var fontSize = helpers.getValueOrDefault(chart.config.options.elements.center.fontSize, Chart.defaults.global.defaultFontSize);
                    var fontStyle = helpers.getValueOrDefault(chart.config.options.elements.center.fontStyle, Chart.defaults.global.defaultFontStyle);
                    var fontFamily = helpers.getValueOrDefault(chart.config.options.elements.center.fontFamily, Chart.defaults.global.defaultFontFamily);
                    var font = helpers.fontString(fontSize * 2, fontStyle, fontFamily);
                    ctx.font = font;
                    ctx.fillStyle = helpers.getValueOrDefault("#ff8900", Chart.defaults.global.defaultFontColor);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillText(chart.config.options.elements.center.text, centerX, centerY - 45);

                    // draw horizontal line
                    ctx.fillStyle = "#dadada";
                    ctx.fillRect(centerX - chart.innerRadius / 2, centerY, chart.innerRadius, 1);

                    //draw text second line
                    font = helpers.fontString(fontSize, fontStyle, fontFamily);
                    ctx.fillStyle = 'black';
                    ctx.font = font;
                    ctx.fillText(chart.config.options.elements.center.text2, centerX, centerY + 35);

                    //draw text 3rd line
                    // font = helpers.fontString(10, fontStyle, fontFamily);
                    // ctx.font = font;
                    // ctx.fillText(chart.config.options.elements.center.text3, centerX, centerY+60);

                    ctx.restore();
                }
            },
        })
    }


}
declare var Chart: any;

---

将颜色对象传入canvas指令：

<div style="display: block">
    <canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [colors]="doughnutChartColors"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

---

您可以尝试以下示例：

 <canvas baseChart
      [data]="doughnutChartData"
      [labels]="doughnutChartLabels"
      [backgroundColor]="doughnutColors"
      [chartType]="doughnutChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)"></canvas>


private donutColors=[
{
 backgroundColor: [
'rgba(110, 114, 20, 1)',
 'rgba(118, 183, 172, 1)',
 'rgba(0, 148, 97, 1)',
 'rgba(129, 78, 40, 1)',
 'rgba(129, 199, 111, 1)'
 ]
 }
 ];

//打字稿

public doughnutChartColors: Color[] = [{
  backgroundColor: ['#f1c40f', '#2ecc71', '#e74c3c']
 }];

//html

<canvas baseChart 
 [data]="doughnutChartData" [labels]="doughnutChartLabels
 [chartType]="doughnutChartType" [colors]="doughnutChartColors"
 height="200">
</canvas>

---

你的问题不清楚，你到底想涂什么颜色？另外，请将其放入plunker中，以便我们更容易调试和帮助。

<canvas baseChart 
 [data]="doughnutChartData" [labels]="doughnutChartLabels
 [chartType]="doughnutChartType" [colors]="doughnutChartColors"
 height="200">
</canvas>