如何用Recharts创建垂直堆叠条形图？坐标轴切换异常修复

你的代码存在三处核心错误，导致图表显示异常：

1. Bar组件的dataKey配置错误：你用了类别字段name，但条形图的长度应该绑定数值字段value
2. 轴的配置与layout属性不匹配：设置layout="vertical"时，X轴对应数值、Y轴对应类别，你搞反了两者的dataKey和类型
3. 对layout属性的理解偏差：layout="vertical"会生成水平条形图（条形横向排列），这正好符合你“Y轴对应条形名称，X轴对应数值”的需求；如果要生成竖直的垂直条形图，不需要设置该属性

修正后的完整代码 #

import "./styles.css";
import React from "react";
import { BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";

const data = [
  { name: "A", value: 5 },
  { name: "B", value: 10 },
  { name: "C", value: 15 },
  { name: "D", value: 20 }
];

export default function App() {
  return (
    <BarChart width={500} height={300} data={data} layout="vertical">
      {/* X轴绑定数值字段value，类型为number */}
      <XAxis dataKey="value" type="number" />
      {/* Y轴绑定类别字段name，类型为category */}
      <YAxis dataKey="name" type="category" />
      {/* Bar组件绑定数值字段value，控制条形长度 */}
      <Bar dataKey="value" fill="#8884d8" />
      <Tooltip />
    </BarChart>
  );
}

关键修正说明 #

• 移除了未使用的CartesianGrid和Legend组件（若需要可保留）
• 将Bar的dataKey改为value，让条形长度对应数据中的数值
• 调整X轴和Y轴的dataKey与类型，匹配layout="vertical"的布局规则：水平条形图中，Y轴展示类别名称，X轴展示数值大小

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