Recharts柱状图如何为每个柱子配置不同的渐变填充颜色

问题核心原因 #

你原代码的问题主要有两点：

• 所有渐变元素共用了同一个id="colorUv"，浏览器只会识别第一个出现的渐变，导致所有柱子颜色相同
• <defs>和<linearGradient>需要定义在图表SVG的顶层，不能嵌套在<Bar>内部的循环逻辑中

实现步骤 #

1. 在<BarChart>组件内部、<Bar>组件外部的顶层位置，循环定义所有渐变，每个渐变设置唯一的id，和柱子索引一一对应
2. 渲染<Cell>时，给每个柱子绑定对应索引的渐变id作为填充值即可

完整代码示例 #

import { BarChart, Bar, Cell, LabelList, XAxis, YAxis } from 'recharts';

// 自定义渐变色终点色数组
const barColors = [ '#4c5f7c', '#dc2424', '#fcda00', '#8383ba', '#23dbbd' ];
// 你的图表数据源
const data = [
  { name: '类别1', pv: 2400 },
  { name: '类别2', pv: 1398 },
  { name: '类别3', pv: 9800 },
  { name: '类别4', pv: 3908 },
  { name: '类别5', pv: 4800 }
];

function GradientBarChart() {
  return (
    <BarChart width={600} height={300} data={data}>
      {/* 顶层定义所有渐变 */}
      <defs>
        {barColors.map((endColor, index) => (
          <linearGradient 
            key={`gradient-${index}`}
            id={`barGradient-${index}`} 
            x1="0" y1="0" x2="100%" y2="0" 
            spreadMethod="reflect"
          >
            <stop offset="0" stopColor="#1a1a1a" />
            <stop offset="1" stopColor={endColor} />
          </linearGradient>
        ))}
      </defs>

      <XAxis dataKey="name" />
      <YAxis />

      <Bar dataKey='pv' radius={40}>
        {/* 每个柱子绑定对应渐变 */}
        {data.map((entry, index) => (
          <Cell 
            key={`cell-${index}`} 
            fill={`url(#barGradient-${index % barColors.length})`} 
          />
        ))}
        <LabelList dataKey='pv' position='insideRight' fill='#f5f5f5' />
        <LabelList dataKey='name' position='insideLeft' fill='#f5f5f5' />
      </Bar>
    </BarChart>
  );
}

注：代码中index % barColors.length的取模逻辑是为了避免数据长度超过颜色数组长度时，出现找不到渐变id的问题，如果你的数据长度和颜色数组长度完全匹配可以去掉该逻辑。

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