如何为 angular 条形图中动态添加的条设置新颜色

Question

下面是我的图表样本

https://stackblitz.com/edit/angular-barchart-example-jodddf?file=src%2Fapp%2Fbarchart%2Fbarchart.ts

单击 change data 按钮时 - 我正在向图表添加新条形图，只想更改新添加的条形图颜色。

有没有可能做到这一点？

Answer 1

public randomize(): void {
let clone = JSON.parse(JSON.stringify(this.barChartData));
clone[0].data = [55, 60, 75, 100];
clone[1].data = [58, 55, 60, 100];

this.barChartColors[0].backgroundColor = [
  'rgba(105,159,177,0.2)',
  'rgba(105,159,177,0.2)',
  'rgba(105,159,177,0.2)',
  'rgba(255,0,0,0.2)',
];

this.barChartColors[1].backgroundColor = [
  'rgba(77,20,96,0.3)',
  'rgba(77,20,96,0.3)',
  'rgba(77,20,96,0.3)',
  'rgba(0,255,0,0.3)',
];
this.barChartColors = [...this.barChartColors];

setTimeout(() => {
  this.barChartData = clone;
}, 100);

}