有什么方法可以更改 ng2-charts 中圆环图的颜色吗？

Question

我试着改变圆环图的颜色。

这是我当前的图表：

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

我使用以下代码更改了 "line chart" 和 "bar chart" 的颜色：

条形图：

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

自定义图表：

折线图：

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.But 尝试了相同的条形图代码，这就是我得到的。

我想自定义不同颜色的图表。但是，图表仅显示一种颜色。我不知道如何解决这个问题。你能帮帮我吗

提前致谢...:)

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

Answer 2

    private GREEN = [{
        backgroundColor: [
            'rgb(39,141,98)',
            'rgb(98,183,159)',
            'rgb(39,141,98,0.05)',
        ],
    }];

    private BLUE = [{
        backgroundColor: [
            'rgb(27,110,161)',
            'rgb(84,168,197)',
            'rgb(27,110,161,0.05)',
        ],
    }];

    private YELLOW =  [{
        backgroundColor: [
            'rgb(197,133,47)',
            'rgb(201,172,80)',
            'rgba(197,133,47,0.05)',
        ],
    }];

private doughnutColorsList = new Map<String, any>([["GREEN",this.GREEN]
        ,["BLUE",this.BLUE],
        ["YELLOW",this.YELLOW]);

<canvas
                                baseChart
                                [data]="data"
                                [options]="doughnutChartOptions"
                                [labels]="doughnutChartLabels"
                                [chartType]="doughnutChartType"
                                [colors]="doughnutColorsList.get(color.key)"
                        >

To get the color depending on a color key - different colors

Answer 3

已接受的答案对 ng2-charts 版本 3 不再有效。现在，您不必使用 [backgroundColor] 参数，而必须使用 [data] 并在数据集中包含一个 backgroundColor 数组。像这样：

HTML

<canvas baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [type]="doughnutChartType">
</canvas>

TS

import { ChartData, ChartType } from 'chart.js';

...
  public doughnutChartType: ChartType = 'doughnut'
  public doughnutChartLabels: string[] = ['Paused', 'Completed', 'Expired'];
  public doughnutChartData: ChartData<'doughnut'> = {
    labels: this.doughnutChartLabels,
    datasets: [
      {
        data: [3, 8, 1],
        
        backgroundColor: ["red", "green", "blue"],
        hoverBackgroundColor: ["darkred", "darkgreen", "darkblue"],
        hoverBorderColor: ["grey"]
      }
    ]
  };

您可以在此处阅读当前版本的文档：https://www.chartjs.org/docs/latest/charts/bar.html

有什么方法可以更改 ng2-charts 中圆环图的颜色吗？

Is there any way to change the doughnut chart color in ng2-charts?

css

customization

canvas

colors

ng2-charts