React使用Recharts绘制多色柱状图全部显示为黑色如何解决

你遇到的多柱全黑、单柱颜色正常的问题，核心是fill字段取值逻辑错误：

• 代码中data.map((m) => m.title)执行后返回的是完整标题数组，单柱时返回['A']、多柱时返回['A','B','C']
• JS中用数组作为对象键取值时，会自动把数组转成字符串：单柱时['A']转成字符串'A'，刚好能匹配COLORS里的键取到正确颜色；多柱时数组转成'A,B,C'，在COLORS中找不到对应键，拿到的fill值是undefined
• Recharts接收到无效fill值时，多柱场景会直接fallback为纯黑色，和你观察到的现象完全一致。

Recharts中给同一数据序列的不同柱体设置独立颜色，不能给Bar组件传全局静态fill值，需要通过Cell子组件逐柱指定对应颜色，修正后的原生Recharts实现代码如下：

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

export default function Overview() {
    const { ratingBar } = graphs ?? {}

    const COLORS = {
        'A': 'red',
        'B': 'green',
        'C': 'orange',
    }

    return (
        <div>
            <BarChart width={600} height={300} data={ratingBar}>
                <XAxis dataKey="title" tick={{ style: { fontSize: '.9rem' } }} />
                <YAxis dataKey="count" domain={[0, 100]} />
                <Tooltip />
                <Legend />
                <Bar dataKey="count">
                    {ratingBar?.map((entry, index) => (
                        <Cell key={`cell-${index}`} fill={COLORS[entry.title]} />
                    ))}
                </Bar>
            </BarChart>
        </div>
    )
}

如果你使用的是基于Recharts二次封装的配置式图表组件，只需要在bars配置中补充单元格配置项，按照上述逐柱传色的逻辑实现即可，核心是不要给整个柱组传无效的全局fill值，要为每个独立柱体单独指定fill属性。

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