Recharts 切换为vertical布局后柱状图显示异常求助

核心问题分析 #

改成垂直柱状图后显示异常，主要是轴的类型配置不匹配，以及可能存在的容器高度问题，以下是修正后的代码和关键说明：

修正后的代码 #

<ResponsiveContainer
  width={"100%"}
  height={400} // 替换为固定高度，或确保父容器有明确高度
>
  <BarChart
    layout="vertical" // 已改为垂直布局
    data={data}
    margin={{
      top: 20,
      right: 20,
      bottom: 20,
      left: 80, // 增大左侧边距，避免分类标签被截断
    }}
  >
    <XAxis dataKey="value" type="number" /> {/* 数值轴，明确type */}
    <YAxis dataKey="name" type="category" /> {/* 分类轴，必须指定type */}
    <Bar dataKey="value" fill="#413ea0" />
  </BarChart>
</ResponsiveContainer>

关键修改点 #

• 轴的类型指定：垂直布局下，Y轴是分类轴（对应name字段），必须显式设置type="category"；X轴是数值轴（对应value字段），设置type="number"确保渲染逻辑正确。
• 容器高度设置：如果ResponsiveContainer的父元素没有设置具体高度，height={"100%"}会导致图表没有渲染空间，建议设置固定高度（如400），或给父容器添加明确的高度样式。
• 边距调整：垂直布局下分类标签可能会超出容器范围，适当增大left边距可以避免标签被截断。

验证说明 #

上述代码会正常渲染垂直柱状图，每个分类（Yes/Not sure/No）对应一个柱子，X轴显示数值刻度，Y轴显示分类名称。

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