Rechart 条形图：除了条形图啥都不显示？ （全宽和全高？）

Posted 2023-03-05

【中文标题】Rechart 条形图：除了条形图啥都不显示？ （全宽和全高？）

【英文标题】：Rechart Bar Chart: show nothing except the bar? (fullwidth and fullheight?)Rechart 条形图：除了条形图什么都不显示？ （全宽和全高？）

【发布时间】：2022-01-04 18:20:36

【问题描述】：

我尝试使用Recharts 创建一个简单的条形堆叠图，但在尝试达到所需的外观和感觉时遇到了一些问题。

基本上，我只需要显示条形图（由不同的条形图组成），没有其他内容（没有图例、轴等，没有边距或填充：条形图必须填满整个图表包装）。

到目前为止我的代码：

  const chartData = [
    
      foo: 8,
      bar: 1,
      baz: 12,
      ext: 1,
      test: 55,
    ,
  ];
...

<ResponsiveContainer  >
  <BarChart layout="vertical" data=chartData margin= top: 0, right: 0, left: 0, bottom: 0 >
    <XAxis type="number" hide />
    <YAxis type="category" hide />
    <Bar dataKey="foo" stackId="a" fill="#f4f1de" barSize=40 />
    <Bar dataKey="bar" stackId="a" fill="#e07a5f" barSize=40 />
    <Bar dataKey="baz" stackId="a" fill="#3d405b" barSize=40 />
    <Bar dataKey="ext" stackId="a" fill="#81b29a" barSize=40 />
    <Bar dataKey="test" stackId="a" fill="#f2cc8f" barSize=40 />
  </BarChart>
</ResponsiveContainer>

我得到的结果是：

我需要删除右侧和底部的白色（灰色）空间。 此外，为了确保条的大小得到尊重（40 像素），我必须将 ResponsiveContainer 的父级设置为 150 像素，否则条会变得非常小（例如 15 像素高）

有什么想法吗？

（ps：我知道这个图表可以用普通的css轻松完成，但我需要使用recharts）

【参考方案1】：

您必须将 rechart 的 ResponsiveContainer 包装在具有所需宽度和高度的容器上。然后您需要指定 Xaxis 和 YAxis 域以将其调整到所需的高度和宽度。您还需要将 BarChart 组件的 barCategoryGap 定义为“0%”。

代码块应该如下所示。

<ResponsiveContainer height='100%' width="100%">
  <BarChart
    barCategoryGap="0%"
    layout="vertical"
    data=chartData
    margin= top: 0, right: 0, left: 0, bottom: 0 
  >
    <XAxis type="number" hide domain=["dataMin", "dataMax"] />
    <YAxis type="category" hide domain=["dataMin", "dataMax"]/>
    <Bar dataKey="foo" stackId="a" fill="#f4f1de" />
    <Bar dataKey="bar" stackId="a" fill="#e07a5f" />
    <Bar dataKey="baz" stackId="a" fill="#3d405b" />
    <Bar dataKey="ext" stackId="a" fill="#81b29a" />
    <Bar dataKey="test" stackId="a" fill="#f2cc8f" />
  </BarChart>
</ResponsiveContainer>

您不需要 Bar 组件上的 barSize 属性。

这是图表的工作代码示例。