gpt4 book ai didi

reactjs - 记录 : Vertical bar chart - set bar thickness

转载 作者:行者123 更新时间:2023-12-03 13:47:33 25 4
gpt4 key购买 nike

如何设置条形粗细?

<ResponsiveContainer width='100%' aspect={4.0 / 3.0}>
<BarChart data={data} layout="vertical">
<XAxis type="number" hide />
<YAxis dataKey="name" hide reversed type="category" />
<Tooltip />
<Legend />
<Bar legendType="star" dataKey="1" fill="#ff6f31" />
<Bar legendType="star" dataKey="2" fill="#ff9f02" />
<Bar legendType="star" dataKey="3" fill="#ffcf02" />
<Bar legendType="star" dataKey="4" fill="#99cc00" />
<Bar legendType="star" dataKey="5" fill="#88b131" />
</BarChart>
</ResponsiveContainer>

当前结果

enter image description here

数据集

[{1: 0, name: "1"},
{2: 0, name: "2"},
{3: 1, name: "3"},
{4: 1, name: "4"},
{5: 2, name: "5"}]

最佳答案

通过在 Bar 标记中使用 barSize 键:

<Bar dataKey="pv" barSize={20} fill="#8884d8" />

关于reactjs - 记录 : Vertical bar chart - set bar thickness,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48907962/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com