Question

这是与link

相关的问题

我正在尝试使用圆环图创建组件并传递输入参数颜色以设置甜甜圈颜色的片段。我在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;

Answer 1

将颜色对象传入canvas指令：

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

在TypeScript中：

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

Answer 2

您可以尝试以下示例：

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

Answer 3

//打字稿

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

// html

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

角度2 ng2图表甜甜圈更改分段颜色

3 个答案: