我如何更改ng2-chart中特定标签的颜色?

问题描述 投票:0回答:1

我在Angular 8中使用ng2-charts制作了一个甜甜圈图。我的甜甜圈图中有3个标签:“通过”,“失败”和“打开”。我想分别为这些标签设置“绿色”,“红色”和“蓝色”。我该怎么做呢?我的Compliance.component.html文件

<div>
    <div>
        <div style="display: block">
            <canvas baseChart 
            [data]="doughnutChartData" 
            [labels]="doughnutChartLabels" 
            [chartType]="doughnutChartType"
            [options]="doughnutChartOptions"
            [colors]="doughnutChartColor">
            </canvas>
        </div>
    </div>
</div>

我的Compliance.component.ts文件

export class ComplianceComponent implements OnInit {

  public doughnutChartLabels: Label[] = ['Passed', 'Open', 'Fail'];
  public doughnutChartData: MultiDataSet = [
    [30, 20, 50]
  ];

  public doughnutChartType: ChartType = 'doughnut';
  constructor() { }

  ngOnInit() {
  }

  public doughnutChartColor: Array<any> = [
    { // first color
      'Passed'-color:green;
      'Failed'-color:red;
      'Open'-color:blue;
    }];

    public doughnutChartOptions={
      responsive: true
    };
}

谢谢。

javascript angular typescript chart.js ng2-charts
1个回答
0
投票
public doughnutChartColor: Color[] = [ { backgroundColor: 'green' }, { backgroundColor: 'red' }, { backgroundColor: 'blue' } ];
© www.soinside.com 2019 - 2024. All rights reserved.