Question

我已将ng2-charts添加到我的项目中并显示2个图表 - donut＆amp;条形图。由于我添加了

，因此显示为灰色

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

<强> @UPDATE：

如果只需要更新backgroundColor而没有其他内容，下面的代码也可以使用。

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

Answer 3

//.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-chart的人有所帮助！

Answer 4

如果您像我一样使用带有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 5

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

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

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

设置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];
  }

如何更改ng2图表的颜色？

5 个答案: