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 height="100%" width="100%">
  <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）

【问题讨论】：

标签： html css reactjs charts 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 属性。

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

【讨论】：