如何更改ng2图表的颜色？

Question

我已经将ng2-charts添加到我的项目中并显示2个图表 - 甜甜圈和条形图.因为我添加了,所以都显示为灰色

    <base-chart class="chart"
                [colors]="chartColors"
                ...
    </base-chart> 

去component.template.html 和

public chartColors:Array<any> =[
    {
      fillColor:'rgba(225,10,24,0.2)',
      strokeColor:'rgba(11,255,20,1)',
      pointColor:'rgba(111,200,200,1)',
      pointStrokeColor:'#fff',
      pointHighlightFill:'#fff',
      pointHighlightStroke:'rgba(200,100,10,0.8)'
    }, ... (3x)

到了 component.ts

是否需要更改颜色的任何其他包导入或设置错误？Chromes html检查器显示以下html输出呈现

ng-reflect-colors="[object Object],[object Object],[object Object]"

Answer 1

你也可以这样做:

<base-chart class="chart"
            [colors]="chartColors"
            ...
</base-chart>

和

public chartColors: any[] = [
      { 
        backgroundColor:["#FF7360", "#6FC8CE", "#FAFFF2", "#FFFCC4", "#B9E8E0"] 
      }];

Answer 2

你应该这样做:

  public chartColors: Array<any> = [
    { // first color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    },
    { // second color
      backgroundColor: 'rgba(225,10,24,0.2)',
      borderColor: 'rgba(225,10,24,0.2)',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(225,10,24,0.2)'
    }];

默认情况下设置灰色,这意味着您的颜色选项不起作用,因为属性名称错误.

这里有一个示例,如何调用颜色属性:

NG2-图表-github上源代码

@UPDATE:

如果只需更新backgroundColor而没有其他内容,下面的代码也可以.

public chartColors: Array<any> = [
    { // all colors in order
      backgroundColor: ['#d13537', '#b0o0b5', '#coffee', ...]
    }
]

Answer 3

如果您像我一样使用带有 ng2-charts 的 MultiDataSet 的甜甜圈类型图表，并且想要更改颜色，那么您将需要执行以下操作：

public doughnutChartColors: Color[] = [
  {backgroundColor:["#9E120E","#FF5800","#FFB414"]},
  {backgroundColor:["#9E120E","#FF5800","#FFB414"]},
  {backgroundColor:["#9E120E","#FF5800","#FFB414"]}
];

图表中的颜色属性如下：

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

图表看起来像：

顺便说一句..这里有一个很好的答案，讨论可访问的颜色。

我的 stackblitz演示Doughnut Chart。