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

Posted 2023-03-16

【中文标题】如何为角度条形图中动态添加的条形设置新颜色

【英文标题】：how to set new colors to dynamically added bar in angular bar chart

【发布时间】：2021-12-29 01:53:15

【问题描述】：

下面是我的图表示例

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

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

有没有可能做到这一点？

【参考方案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);

【讨论】：

感谢@zainhassan，工作正常stackblitz.com/edit/…