尝试构建一个条形图，其中每个条形本质上是 2 个相互叠加的条形图，并且最顶部的条形图比底部的条形图更细。
我看到现有的功能，如果您提供“stackId”，它会堆叠它，但它堆叠在它上面，这不是我想要的。
我一直在尝试自定义支持此功能的条形形状，但未能成功。
让这变得更加棘手的是，我们对 Y 轴使用对数缩放。
对此的任何意见将不胜感激!
编辑:附加我正在尝试做的事情的模拟:
分层条形图
最佳答案
很好的问题。这当然是可能的。渲染多个 Bar 元素时，它们将被放置在彼此相邻的单个轴上。
诀窍是使用多个 x 轴。为了展示其工作原理，我在 Recharts 故事书中添加了一个新故事。
您可以在 PR 中找到它的代码并很快在 repo 协议(protocol)本身中。 为了获得完整的答案，我在此处复制了代码。
<ResponsiveContainer width="100%" height={400}>
<BarChart data={data}>
<Bar dataKey="uv" fill="green" xAxisId="one" barSize={50} />
<XAxis xAxisId="one" />
{/* The smaller bar must be rendered in front of the larger one to be visible. */}
<Bar dataKey="pv" fill="red" xAxisId="two" barSize={30} />
<XAxis xAxisId="two" hide />
</BarChart>
</ResponsiveContainer>
关于bar-chart - 是否可以堆叠 2 个条形，彼此叠放(而不是彼此叠放)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75401714/