角度2 NG2-チャートドーナツ変化セグメントカラー

Question

これは私がドーナツチャートでコンポーネントを作成し、ドーナツ色のセグメントを設定するための入力パラメータの色を通過しようとしていlink

に関連する問題です。私はngOnInit（）のグラフの初期化を行っています。ホバー（hoverBackgroundColor）の色は変更されますが、backgroundColorの色は変更されません。何か不足していますか？活字体で

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

：

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; 

Answer 1

色でパスがcanvasディレクティブにオブジェクト

public doughnutChartColors: any[] = 
[ 
    { 
     backgroundColor: 'rgba(177,200,84,0.2)', 
     borderColor: 'rgba(106,185,236,1)' 
    } 
]