javascript - 胜利堆栈中单杠的间距和大小？

Question

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

您可以在 CodeSandbox 上查看或尝试代码:

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>
  )
}

我有两个部分的问题:

1. 我怎样才能使这 3 个条的高度更高(从技术上讲，我猜是宽度，因为我将其设置为水平)？
2. 如何在每个栏之间添加一点间距？意思是红色、橙色和绿色条之间有 2 像素的空间。

我在查看 VictoryStack 文档和 VictoryBar 图表时尝试了很多东西，但我无法让它工作。任何帮助将不胜感激，谢谢!

Answer 1

这是一个可行的解决方案:

barWidth 条形高度属性

添加了一个 style 属性来模拟带边框的边距

https://codesandbox.io/s/7y2ym084o6

import React from "react";
import ReactDOM from "react-dom";
import { VictoryStack, VictoryBar } from "victory";

function App() {
  return (
    <VictoryStack
      style={{
        data: {
          stroke: "rgba(255,255,255,1)",
          strokeWidth: 2
        }
      }}
      colorScale={["#D0021B", "#F5A623", "#00C16F"]}
    >
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 50 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
      <VictoryBar barWidth={30} horizontal data={[{ x: "progress", y: 25 }]} />
    </VictoryStack>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);