有什么方法可以更改ng2-charts中的甜甜圈图颜色？

Question

我尝试更改甜甜圈图的颜色。

这是我当前的图表：

现在，我尝试按照#fa72bc，#00bfff和#ffa500的方式更改这些颜色。

我使用以下代码更改了“折线图”和“条形图”的颜色：

酒吧图表：

public barChartColors:Array<any> =
[
  { // Pink
    backgroundColor: '#fa72bc'
  },
  { // Blue
    backgroundColor: '#00bfff'
  },
  { // Orange
    backgroundColor: '#ffa500'
  },
  { // Green
    backgroundColor: '#3ec351'
  }
];

自定义图表：

LINE CHART：

public lineChartColors:Array<any> = 
[
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  },
  { // dark grey
    backgroundColor: 'rgba(77,83,96,0.2)',
    borderColor: 'rgba(77,83,96,1)',
    pointBackgroundColor: 'rgba(77,83,96,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(77,83,96,1)'
  },
  { // grey
    backgroundColor: 'rgba(148,159,177,0.2)',
    borderColor: 'rgba(148,159,177,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }
];

我尝试过使用与Donut Chart相同的条形图。但是，这就是我得到的。

我想用不同的颜色自定义图表。但是，图表仅显示一种颜色。我不知道该怎么解决。你能帮我吗？

预先感谢... :)

Answer 1

尝试这个例子，

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