如何为Angular柱状图中动态添加的柱子设置单独的新颜色

• 方案1：数据打标法（兼容性最好，适配绝大多数Angular图表库）
  1. 给新增的数据项添加专属标记，原有数据保留原有结构即可
  2. 改写图表的背景色回调逻辑，根据数据标记返回对应颜色，参考代码如下：

  // 图表配置中的颜色动态逻辑
  barChartOptions = {
    // 其余原有配置保持不变
    datasets: {
      bar: {
        backgroundColor: (ctx) => {
          const item = ctx.dataset.data[ctx.dataIndex] as any;
          return item?.isNew ? '#ff6b6b' : '#4ecdc4';
        }
      }
    }
  }
  
  // change data按钮的点击逻辑调整
  addNewBar() {
    // 新增数据时带上isNew标记
    this.chartData.datasets[0].data.push({
      value: Math.floor(Math.random() * 100),
      isNew: true
    });
    // 触发变更检测刷新图表
    this.chartData = {...this.chartData};
  }
  

• 方案2：索引记录法（适配不支持对象类型数据的图表库）
  1. 单独维护一个数组存储所有新增柱子的索引
  2. 颜色回调中判断当前渲染项的索引是否在新增索引集合中，返回对应颜色，参考代码如下：

  private newBarIndexes: number[] = [];
  
  addNewBar() {
    const currentLen = this.chartData.datasets[0].data.length;
    this.chartData.datasets[0].data.push(Math.floor(Math.random() * 100));
    // 记录新增柱子的索引
    this.newBarIndexes.push(currentLen);
    this.chartData = {...this.chartData};
  }
  
  // 颜色逻辑
  backgroundColor: (ctx) => {
    return this.newBarIndexes.includes(ctx.dataIndex) ? '#ff6b6b' : '#4ecdc4';
  }
  

两种方案都不会影响原有柱子的颜色，仅对新增的柱子生效。

内容的提问来源于stack exchange，提问作者Kumaresan Sd