2

我有一个简单的 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. 如何在每个条之间添加一点间距？意思是红色、橙色和绿色条之间有 2px 的空间。

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

4

3 回答 3

3

这是一个有效的解决方案：

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

于 2018-12-14T09:58:36.357 回答
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。

于 2018-12-13T19:00:12.297 回答
1

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

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

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

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

 <VictoryBar data={data} key={outcome} barRatio={1} alignment="start" />
于 2019-11-17T10:31:04.743 回答