Javascript 胜利栈中水平杆的间距和尺寸？

我有一个简单的三部分水平条形图，如下所示：

您可以在上查看或试用以下代码：

function App() {
  return (
    <VictoryStack colorScale={['#D0021B', '#F5A623', '#00C16F']}>
      <VictoryBar horizontal data={[{ x: 'progress', y: 50 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
      <VictoryBar horizontal data={[{ x: 'progress', y: 25 }]} />
    </VictoryStack>
  )
}

函数应用程序（）{
返回(
)
}

我有两个部分的问题：

我怎样才能使这3根钢筋的高度更高（我猜技术上是宽度，因为我使其水平）

如何在每个条之间添加一点间距？意思是红色、橙色和绿色条之间有2倍的空间

我在查看

VictoryStack

文档和

VictoryBar

图表时尝试了很多东西，但都没有成功。任何帮助都将不胜感激，谢谢

您可以使用属性

barWidth

设置条的宽度：

<VictoryBar
    horizontal
    barWidth={30}
    data={[{ x: 'progress', y: 50 }]}
/>

要在条之间留出空格，请尝试使用

y0

属性：

<VictoryBar
    horizontal
    data={[{ x: 'progress', y: 25, y0: 77 }]}
/>

---

为了描述整个解决方案，这里是您的略作改进。

这里是一个具有以下功能的工作裁剪解决方案：

酒吧宽度

酒吧高度的道具

将添加

样式

道具，以模拟带边框的边距

从“React”导入React；
从“react dom”导入react dom；
从“victory”导入{VictoryStack，VictoryBar}；
函数App（）{
返回(
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）您可以使用此处提出的其他解决方案，使用barWidth和/或style道具

然而，我认为硬编码条形码宽度不是一个好主意，原因有二。首先，条形图的宽度应与用于查看图表的设备的显示大小相适应。第二，随着你的图表变得越来越复杂，你可能有一个可变数量的胜利条

我认为有一个更优雅的解决方案：弹幕道具。这将动态设置相对于条间可用空间的条宽，如文档所示

如果您想填满整个空间，并使您的酒吧尽可能宽，1的barRatio是有意义的，例如：

 <VictoryBar data={data} key={outcome} barRatio={1} alignment="start" />

非常感谢，回答了我需要的所有问题。：）我会在一天内给你赏金，因为我要等24小时。
 <VictoryBar data={data} key={outcome} barRatio={1} alignment="start" />