Ant Design Charts v2.2.1 柱状图自定义颜色实现咨询

针对你提供的分组柱状图配置，以下是三种常用的柱子颜色修改方案：

1. 直接指定固定颜色列表 #

在配置中添加color字段，传入颜色数组，数组元素会按顺序匹配colorField（即你的group字段）对应的分组：

const config = {
  xField: "title",
  yField: "value",
  label: {
    text: (d: any) => {
      console.debug("d", d);
      return `${(d.value * 100).toFixed(1)}%`;
    },
    textBaseline: "bottom",
  },
  style: {
      radiusTopLeft: 6,
      radiusTopRight: 6,
    },
  legend: false,
  colorField: "group",
  group: true,
  // 添加自定义颜色数组
  color: ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4']
};

2. 通过style回调动态设置颜色 #

将style改为函数，根据每条数据的group值返回对应颜色，同时保留圆角配置：

const config = {
  xField: "title",
  yField: "value",
  label: {
    text: (d: any) => {
      console.debug("d", d);
      return `${(d.value * 100).toFixed(1)}%`;
    },
    textBaseline: "bottom",
  },
  // 改为函数式style，根据分组动态赋值颜色
  style: (d: any) => {
    const colorMap = {
      groupA: '#FF6B6B',
      groupB: '#4ECDC4',
      groupC: '#45B7D1'
    };
    return {
      radiusTopLeft: 6,
      radiusTopRight: 6,
      fill: colorMap[d.group] || '#999' // 未匹配到分组时使用默认灰色
    };
  },
  legend: false,
  colorField: "group",
  group: true,
};

3. 使用color回调函数自定义颜色 #

通过color的回调逻辑，根据group字段返回对应颜色：

const config = {
  xField: "title",
  yField: "value",
  label: {
    text: (d: any) => {
      console.debug("d", d);
      return `${(d.value * 100).toFixed(1)}%`;
    },
    textBaseline: "bottom",
  },
  style: {
      radiusTopLeft: 6,
      radiusTopRight: 6,
    },
  legend: false,
  colorField: "group",
  group: true,
  // 基于分组字段返回对应颜色
  color: (d: any) => {
    switch(d.group) {
      case 'groupA':
        return '#FF6B6B';
      case 'groupB':
        return '#4ECDC4';
      case 'groupC':
        return '#45B7D1';
      default:
        return '#999';
    }
  }
};

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