如何更改 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

你应该这样做：

  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-charts-github-source-code

@UPDATE：

如果只需要更新 backgroundColor 而不需要更新，下面的代码也可以。

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

Answer 2

可以通过图表数据设置图表颜色。有助于将特定颜色与特定系列匹配。

例如删除或忽略 [colors] 属性和数据规范

<canvas style="height: 600px" baseChart
        chartType="bar"
        [datasets]="chartData"

设置图表数据

[
  {
    "data": [
      {
        "y": 18353021615,
        "t": 2014
      },
    ],
    "label": "Energy",
    "backgroundColor": "rgb(229,229,229)",
    "pointBackgroundColor": "rgba(229, 229, 229, 1)",
    "pointHoverBackgroundColor": "rgba(151,187,205,1)",
    "borderColor": "rgba(0,0,0,0)",
    "pointBorderColor": "#fff",
    "pointHoverBorderColor": "rgba(151,187,205,1)"
  },

所以下面的测试会通过

expect(component.chartData[0].backgroundColor).toBe('rgba(242,200,124,1)');

我有一组默认颜色的模板

public readonly localChartColours: Color[] = [
{
  backgroundColor: 'rgb(78,180,189)',
  pointBackgroundColor: 'rgba(78, 180, 189, 1)',
  pointHoverBackgroundColor: 'rgba(151,187,205,1)',
  borderColor: 'rgba(0,0,0,0)',
  pointBorderColor: '#fff',
  pointHoverBorderColor: 'rgba(151,187,205,1)'
}, {

设置数据时设置颜色

const chartDataPrototype = {data: points, label: seriesLabel};
const coloursForItem = this.findColours(this.chartData.length);
Object.keys(coloursForItem).forEach(colourProperty => {
  chartDataPrototype[colourProperty] = coloursForItem[colourProperty];
});
this.chartData.push(chartDataPrototype);

并根据需要在特定的基础上覆盖它们

this.chartData.forEach(item => {
  if (uopColours[item.label]) {
      item.backgroundColor = uopColours[item.label];
  }

Answer 3

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

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

图表中的colors属性如下：

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

图表如下：

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

My stackblitz 与 Doughnut Chart 演示。

Answer 4

//.ts_file     

    public chartColors() {
            return [{
              backgroundColor: this.alert.severityColor,
              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)'
          }]
        }


//.html_file

<div style="display: block">
          <canvas baseChart
                  [datasets]="barChartData()"
                  [options]="barChartOptions"
                  [legend]="barChartLegend"
                  [chartType]="barChartType"
                  [colors]="chartColors()"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"></canvas>
        </div>

我需要根据附加到警报的值和颜色动态更改图表的颜色。我发现@uluo 有一个很好的答案。我将其从类的属性更改为函数，并将颜色设置为警报中动态元素的对象返回。然后我用这个函数来绑定我的图表颜色，这很神奇。我在这个问题上被困了几个小时！

希望这对尝试使用 Angular 将动态值传递给 ng2-charts 的任何人有所帮助！

Answer 5

你也可以这样做：

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

和

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