Question

我有一个使用这些选项的折线图，但背景没有改变颜色，都使用默认颜色。我错过了什么吗？

public lineChartColors:Array<any> = [
  {
    borderColor: 'rgba(128,139,157,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  },
  {
    borderColor: 'rgba(47,63,46,1)',
    pointBackgroundColor: 'rgba(77,83,96,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(77,83,96,1)'
  },
  {
    borderColor: 'rgba(128,129,157,1)',
    pointBackgroundColor: 'rgba(148,159,177,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }
];

Answer 1

pointBackgroundColor和backgroundColor是两个不同的选项，如果你在backgroundColor中添加它应该反映你想要的

public lineChartColors:Array<any> = [
  {
    pointBackgroundColor: 'rgba(//someColor)', //add this
    borderColor: 'rgba(128,139,157,1)',
    pointBorderColor: '#fff',
    pointHoverBackgroundColor: '#fff',
    pointHoverBorderColor: 'rgba(148,159,177,0.8)'
  }, ...

Answer 2

在.html文件中

   public lineChartColors: any[] = [
              { 
                backgroundColor:["#0277BD", "#FB6542"] 
              }];

在.ts文件中

<View>
  <Child>
    ....
  </Child>
</View>

ng2-charts的[colors]属性将改变数组中指定颜色的颜色。

ng2-图表背景颜色不反映正确值

2 个答案: