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

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

我有两个部分有问题：

我怎样才能使这 3 个条的高度更高（从技术上讲，我猜是宽度，因为我把它变成水平的）？
如何在每个栏之间添加一点间距？意思是红色、橙色和绿色条之间 space 的 2px。

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

Answer 1

您可以使用属性 barWidth 来设置条的宽度：

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

或者还有另一种方法可以通过 style:

<VictoryBar 
    horizontal 
    style={ { data: { width:30 } } } 
    data={[{ x: 'progress', y: 25 }]}
/>

要在条形之间留出空间，请尝试使用 y0 属性:

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

在这里描绘整个解决方案是您稍加提炼的Sandbox。

Answer 2

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

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 3

您可以使用 barWidth and/or 样式道具使用此处提出的其他解决方案。

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

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

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

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

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

Spacing and size of horizontal bars in a Victory stack?

javascript

charts

svg

reactjs

victory-charts