如何修改Ant Design Chart百分比柱状图条形内的三种颜色

你参考的百分比柱状图属于堆叠类柱图，单个柱内的多段颜色是和你配置的seriesField（分类字段）绑定映射的，要修改3个分段的颜色，直接修改图表配置的color属性即可，不用改底层图形渲染逻辑，两种常用实现方式：

• 数组传值快速配置
  按你数据中seriesField对应分类的排序，传入长度为3的自定义色值数组，配置后会自动按顺序给三个分类匹配对应颜色，示例配置：

const chartConfig = {
  // 这里保留你从官方示例参考的基础配置：data、xField、yField、seriesField、isPercent: true 等
  color: ['#2E8B57', '#FFD700', '#DC143C'], // 替换成你自己需要的三个十六进制/rgb色值即可
}

• 回调映射精准匹配
  如果你担心数组顺序和分类顺序不匹配导致配色错位，可以给color传入回调函数，通过分类名精准绑定对应颜色，容错率更高：

const chartConfig = {
  // 其余基础配置和参考示例保持一致
  color: (dataItem) => {
    // 这里的type替换成你自己配置的seriesField对应的字段名
    const customColorMap = {
      '分类A': '#165DFF',
      '分类B': '#FF7D00',
      '分类C': '#00B42A',
    }
    return customColorMap[dataItem.type] || '#ccc'
  }
}

踩坑提示：不要通过修改columnStyle里的fill属性强行给柱形填色，这种写法会破坏堆叠分类的颜色映射逻辑，很容易出现不同柱子下相同分类颜色不一致的问题，用顶层color配置是官方原生支持的方案，没有兼容问题。

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