新手求助：如何用Recharts实现指定效果的垂直堆叠条形图？

样本JSON数据 #

每个数据项对应一个日期，各分类数值为百分比（总和固定为100），直接适配堆叠需求：

[
  {
    "date": "2024-05-01",
    "已完成": 30,
    "进行中": 50,
    "未开始": 20
  },
  {
    "date": "2024-05-02",
    "已完成": 45,
    "进行中": 35,
    "未开始": 20
  },
  {
    "date": "2024-05-03",
    "已完成": 60,
    "进行中": 25,
    "未开始": 15
  },
  {
    "date": "2024-05-04",
    "已完成": 75,
    "进行中": 15,
    "未开始": 10
  },
  {
    "date": "2024-05-05",
    "已完成": 90,
    "进行中": 8,
    "未开始": 2
  }
]

Recharts实现代码 #

以下是完整的垂直堆叠条形图代码，包含百分比展示、日期轴配置：

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

// 引入上面的样本数据
const data = [
  { "date": "2024-05-01", "已完成": 30, "进行中": 50, "未开始": 20 },
  { "date": "2024-05-02", "已完成": 45, "进行中": 35, "未开始": 20 },
  { "date": "2024-05-03", "已完成": 60, "进行中": 25, "未开始": 15 },
  { "date": "2024-05-04", "已完成": 75, "进行中": 15, "未开始": 10 },
  { "date": "2024-05-05", "已完成": 90, "进行中": 8, "未开始": 2 }
];

const VerticalStackedPercentChart = () => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={data}
        layout="vertical" // 切换为垂直条形图
        margin={{ top: 20, right: 30, left: 40, bottom: 5 }}
      >
        {/* X轴设置百分比范围与显示格式 */}
        <XAxis 
          type="number" 
          domain={[0, 100]} 
          tickFormatter={(val) => `${val}%`} 
        />
        {/* Y轴绑定日期字段 */}
        <YAxis dataKey="date" type="category" />
        {/* 提示框显示百分比 */}
        <Tooltip formatter={(val) => `${val}%`} />
        <Legend />
        {/* 相同stackId实现堆叠效果 */}
        <Bar dataKey="已完成" stackId="1" fill="#8884d8" />
        <Bar dataKey="进行中" stackId="1" fill="#82ca9d" />
        <Bar dataKey="未开始" stackId="1" fill="#ffc658" />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default VerticalStackedPercentChart;

关键配置说明 #

• layout="vertical"：将条形图切换为垂直方向
• stackId：所有需要堆叠的Bar组件设置相同的stackId，确保它们属于同一堆叠组
• 百分比处理：数据直接使用百分比值，X轴和提示框通过formatter添加%符号
• 自适应容器：使用ResponsiveContainer让图表适配父容器宽度

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