不确定这里是否有人熟悉Victory.js框架,但我正在尝试创建一个带有圆角的堆叠条。除了圆边,我什么都有,但我似乎搞不清楚。这是我的代码:
import React from "react";
import { render } from "react-dom";
import { VictoryStack, VictoryBar } from "victory";
const Chart = () => {
return (
<VictoryStack
horizontal
style={{
data: { stroke: "white", strokeWidth: 3, width: 30 }
}}
colorScale={["#9e62c0", "#bc95d4", "#44c973", "#f9c63d", "#f5a000"]}
>
<VictoryBar data={[{ x: "c", y: 0.5 }]} />
<VictoryBar data={[{ x: "c", y: 1 }]} />
<VictoryBar data={[{ x: "c", y: 5.2 }]} />
<VictoryBar data={[{ x: "c", y: 2.3 }]} />
<VictoryBar data={[{ x: "c", y: 1 }]} />
</VictoryStack>
);
};
render(<Chart />, document.getElementById("root"));
我想好了如何做到这一点。我为每个单独的条形图的每个角落添加了以下内容:
cornerRadius={{bottomLeft:(4), bottomRight:(4), topLeft:(4), topRight:(4)}}