我最近一直在尝试用Recharts构建一个特定样式的图表，试了好几种方法都没达到预期效果，想请大家帮忙看看能不能实现！

目标样式说明 #

我的目标图表是每个类别下有两根堆叠的柱子：

• 底部是橙色的基础柱状图，带有绿色的上下方向误差棒
• 橙色柱子正上方叠着一根黑色的柱状图

尝试过程与问题 #

• 我先后试过普通柱状图、堆叠柱状图、组合图表、误差棒组件等多种组合，但都没成功还原目标样式
• 目前最接近预期的效果是：橙色柱子和黑色柱子各自独立排列（没有堆叠），误差棒显示正常
• 但当我给两个<Bar>组件添加stackId="0"属性，想让黑色柱子叠在橙色柱子上方时，出现了异常：黑色柱子的高度变得异常高，完全偏离了预期位置

相关代码 #

最接近预期效果的代码（未添加stackId） #

const customData = [ 
  { name: 'food', uv: 1000, pv: [1001,2000], amt: 4500, time: 1, uvError: [100, 50], pvError: [110, 20] }, 
  { name: 'cosmetic', uv: 2300, pv: [2301,3700], amt: 6500, time: 2, uvError: 120, pvError: 50 }, 
  { name: 'storage', uv: 2200, pv: [2201,3500], amt: 5000, time: 3, uvError: [120, 80], pvError: [200, 100] }, 
  { name: 'digital', uv: 1800, pv: [1801,3300], amt: 4000, time: 4, uvError: 100, pvError: 30 }, 
]; 

class POC extends React.Component { 
  render() { 
    return ( 
      <div className="bar-chart-wrapper"> 
        <ComposedChart width={400} height={400} data={customData}> 
          <XAxis /> 
          <YAxis /> 
          <Bar dataKey="uv" fill="#ff7300"> 
            <ErrorBar dataKey="pvError" width={5} strokeWidth={10} stroke="green" direction="y" /> 
          </Bar> 
          <Bar dataKey="pv"> 
          </Bar> 
        </ComposedChart> 
      </div> 
    ); 
  } 
} 

异常效果的代码修改 #

仅在上述代码的两个<Bar>组件中添加了stackId="0"属性，其余代码完全一致。

想请教各位，有没有办法用Recharts实现我想要的图表样式？麻烦大家给点思路或者解决方案，提前谢谢大家了！

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