胜利栈中水平杆的间距和大小？
提问于 2018-12-11 09:58:53
我有一个简单的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小节的高度更高(从技术上说，我猜宽度是因为我把它变成水平的)？
- 如何在每个栏之间增加一点间距？意思是像红色，橙色和绿色之间的空间2px。
在查看VictoryStack文档和VictoryBar图表时，我已经尝试了很多东西，但是我一直无法让它正常工作。任何帮助都将不胜感激，谢谢！
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-12-13 11:00:12
- 可以使用属性
barWidth设置条形图的宽度： <件条水平barWidth={30} data={{ x：‘进度’，y: 50 }} /> 或者还有一种方式通过它的style： <件条水平style={数据：{宽度:30 }} data={ x：‘进度’，y: 25 }}} /> - 若要在条形图之间创建空格，请尝试使用
y0属性： <件条水平data={{ x：‘进度’，y: 25，y0: 77 }} />
在这里描述整个解决方案的方法是您略为精练的沙盒。
Stack Overflow用户
发布于 2018-12-14 01:58:36
下面是一个可以工作的剪短解决方案：
杆高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);
Stack Overflow用户
发布于 2019-11-17 02:31:04
您可以使用这里提出的其他解决方案，使用barWidth和/或样式道具。
但是，我认为硬编码barWidth并不是一个好主意，原因有两个。首先，barWidth应该响应用于查看图表的设备的显示大小。其次，随着图表变得更加复杂，您可能有一个可变数量的VictoryBars。
我认为还有一个更优雅的解决方案: barRatio道具。这将动态地设置相对于条之间可用空间的barWidth，如文档所示的这里。
如果您想要填充整个空间，并使您的酒吧尽可能宽，barRatio 1是有意义的，例如：
<VictoryBar data={data} key={outcome} barRatio={1} alignment="start" />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53729821
复制
腾讯云开发者
