使用Recharts创建多数据集堆叠柱状图的问题求助

我正在尝试使用Recharts创建垂直堆叠柱状图，目前遇到一个问题：无法在单根柱子中集成数量不同的多数据集。以下是我的代码示例：

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

const App = () => {

    // 示例数据
    const data = [
        { name: "周一", task1: 30, task2: 70, task3: 30 },
        { name: "周二", task1: 12, task3: 56 },
        { name: "周三", task4: 25},
        { name: "周四", task5: 35, task6: 65 },
    ];

    return (
        <BarChart width={500} height={500} data={data} >
            <CartesianGrid />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="x" stackId="a" fill="aqua" />
            <Bar dataKey="y" stackId="a" fill="green" />
        </BarChart>
    );
}

export default App;

我期望实现的效果是：每个日期对应一根堆叠柱子，柱子由不同数量的任务段堆叠而成（比如周一的柱子有3段，周二有2段，周三有1段，周四有2段），不同任务段用不同颜色区分，图例能对应显示所有任务类型。

你当前代码的核心问题有两个：

• 没有为每个任务类型单独创建<Bar>组件，误用了不存在的x、y作为dataKey
• 未利用Recharts的堆叠特性，统一管理同组柱子的堆叠ID

以下是修正后的代码：

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

const App = () => {
    // 示例数据
    const data = [
        { name: "周一", task1: 30, task2: 70, task3: 30 },
        { name: "周二", task1: 12, task3: 56 },
        { name: "周三", task4: 25},
        { name: "周四", task5: 35, task6: 65 },
    ];

    // 提取所有唯一的任务类型（排除name字段）
    const allTasks = Array.from(new Set(
        data.flatMap(item => Object.keys(item).filter(key => key !== 'name'))
    ));

    // 任务与颜色的映射（可自定义）
    const taskColorMap = {
        task1: '#ff4d4f',
        task2: '#1890ff',
        task3: '#52c41a',
        task4: '#faad14',
        task5: '#722ed1',
        task6: '#13c2c2'
    };

    return (
        <BarChart width={500} height={500} data={data}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            {/* 为每个任务类型生成对应的Bar组件，共享同一个stackId实现堆叠 */}
            {allTasks.map(task => (
                <Bar 
                    key={task} 
                    dataKey={task} 
                    stackId="daily-tasks" 
                    fill={taskColorMap[task]} 
                    name={task}
                />
            ))}
        </BarChart>
    );
}

export default App;

关键要点： #

1. 动态生成Bar组件：从数据中提取所有任务类型，动态渲染对应的<Bar>组件，确保每个任务都能在柱子中占一席之地
2. 统一stackId：所有<Bar>组件使用相同的stackId（如daily-tasks），Recharts会自动将同一日期下的任务段堆叠成一根柱子
3. 缺失字段兼容：数据中未包含的任务字段会被默认视为0，不会显示空段，不影响堆叠逻辑
4. 自定义颜色：通过颜色映射对象为每个任务指定固定颜色，保证图例与柱子颜色一一对应

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