时间戳

首页 > 解决方案 > 胜利堆栈中水平条的间距和大小？

javascript - 胜利堆栈中水平条的间距和大小？

问题描述

我有一个简单的 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图表时，我尝试了很多东西，但我无法让它发挥作用。任何帮助将不胜感激，谢谢！

标签： javascriptreactjssvgchartsvictory-charts

解决方案

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

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

推荐阅读