如何在Recharts堆叠柱状图中展示月度数据？

数据转换：补全12个月的标准化数据集 #

原始数据仅包含部分月份记录，要实现12个月度图表的完整展示，必须先生成覆盖全年12个月的适配数据集：

• 先创建12个月的基础模板，每个月份默认CarbonAmount为0，CarbonDescription设为"无记录"
• 将原始数据中的记录按月份匹配到模板中，覆盖对应字段值

实现代码：

const rawData = [
  { "CarbonAmount": 120, "CarbonDescription": null, "Date": "2022-03-14" },
  { "CarbonAmount": 140, "CarbonDescription": "Electricity", "Date": "2022-04-11" }
];

const getMonthlyDataset = (source) => {
  // 生成1-12月的基础数据模板
  const monthlyBase = Array.from({ length: 12 }, (_, idx) => ({
    monthNum: idx + 1,
    monthName: new Date(2022, idx).toLocaleString('zh-CN', { month: 'long' }),
    CarbonAmount: 0,
    CarbonDescription: "无记录"
  }));

  // 匹配原始数据到对应月份
  source.forEach(item => {
    const month = new Date(item.Date).getMonth() + 1;
    const targetIdx = monthlyBase.findIndex(item => item.monthNum === month);
    if (targetIdx !== -1) {
      monthlyBase[targetIdx] = {
        ...monthlyBase[targetIdx],
        CarbonAmount: item.CarbonAmount,
        CarbonDescription: item.CarbonDescription || "无记录"
      };
    }
  });

  return monthlyBase;
};

// 适配Recharts的最终数据集
const chartData = getMonthlyDataset(rawData);

渲染12个独立月度图表 #

基于转换后的数据集，用Recharts渲染12个图表，通过弹性盒布局实现整齐排列：

import { BarChart, Bar, YAxis, Tooltip, ResponsiveContainer } from 'recharts';

const SingleMonthChart = ({ data }) => (
  <div style={{ width: '240px', height: '180px', margin: '12px' }}>
    <h4 style={{ textAlign: 'center', margin: '8px 0' }}>{data.monthName}</h4>
    <ResponsiveContainer width="100%" height="100%">
      <BarChart data={[data]}>
        <YAxis domain={[0, 'dataMax + 20']} />
        <Tooltip 
          formatter={(val) => [`${val}`, '碳排放总量']}
          label={() => data.CarbonDescription}
        />
        <Bar dataKey="CarbonAmount" fill="#2ecc71" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  </div>
);

const App = () => {
  const chartData = getMonthlyDataset(rawData);

  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', padding: '16px', justifyContent: 'center' }}>
      {chartData.map(item => (
        <SingleMonthChart key={item.monthNum} data={item} />
      ))}
    </div>
  );
};

export default App;

核心修复说明 #

1. 补全缺失月份：确保12个月都有对应数据项，避免图表渲染时出现空白或报错
2. 日期匹配逻辑：通过Date.getMonth()准确提取月份，保证原始数据能对应到正确的月度模板
3. 空值处理：对CarbonDescription为null的情况设置默认文本，避免Tooltip显示异常
4. 布局适配：用Flex布局实现多图表的响应式排列，ResponsiveContainer确保图表自适应容器尺寸

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