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

Question

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

您可以在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. 如何在每个条之间添加一些间距？意思是红色，橙色和绿色条之间的间隔为2px。

在查看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);

Answer 2

1. 您可以使用属性barWidth来设置条形的宽度，如下所示：<VictoryBar horizontal barWidth={30} data={[{ x: 'progress', y: 50 }]} /> 或者，还有另一种方法可以通过其style：<VictoryBar horizontal style={ { data: { width:30 } } } data={[{ x: 'progress', y: 25 }]} />
2. 要在条形图之间留出空间，请尝试使用y0属性，如下所示：<VictoryBar horizontal data={[{ x: 'progress', y: 25, y0: 77 }]} />

在这里描绘整个解决方案的是您略微完善的Sandbox。

Answer 3

您可以使用barWidth和/或style道具使用此处提出的其他解决方案。

但是，我认为硬编码barWidth并不是一个好主意，这有两个原因。首先，barWidth应该响应于您用来查看图表的设备的显示尺寸。其次，随着图表变得越来越复杂，您可能会有可变数量的VictoryBars。

我认为还有一个更优雅的解决方案：barRatio道具。如here所述，这将相对于条之间的可用空间动态设置barWidth。

如果您想填充整个空间并使条形图尽可能宽，则barRatio为1是有意义的，例如：

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