Angular 2 NG2-charts甜甜圈变化段颜色

Question

这是与链接有关的问题

我试图用甜甜圈图创建组件并传递输入参数颜色，以设置甜甜圈颜色的片段。我正在ngoninit((中对图表进行初始化。悬停(HoverbackgroundColor(更改了颜色，但对于背景颜色而言没有更改。我想念什么吗？

    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

//Typescript

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

//html

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

Answer 2

将颜色对象传递到canvas指令：

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

在打字稿中：

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

Answer 3

您可以尝试此示例：

 <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)'
 ]
 }
 ];