如果 YAxis 中的标签太长,如何动态更改 Recharts 中的 ResponsiveContainer 的高度?
这是我的代码:
<ResponsiveContainer height={items.length * 50 + 10} width="100%">
<BarChart
data={items}
margin={{top: 0, right: 40, left: 40, bottom: 20}}
layout="vertical"
barCategoryGap="20%"
barGap={2}
maxBarSize={10}
>
<CartesianGrid
horizontal={false}
stroke='#a0a0a0'
strokeWidth={0.5}
/>
<XAxis
type="number"
axisLine={false}
stroke='#a0a0a0'
domain={[0, 10]}
ticks={[0, 2.5, 5, 7.5, 10]}
strokeWidth={0.5}
/>
<YAxis
type="category"
dataKey={this.props.YKey}
width={40}
/>
<Bar
dataKey="score"
animationDuration={1000}
label={{position: 'right', backgroundColor: '#fff'}}
shape={<Rectangle
className={classes.rectangle}
radius={[0, 10, 10, 0]}
/>}
>
</Bar>
</BarChart>
</ResponsiveContainer>
And this is how it looks like when the labels are too long:
我可以用标签中字符串的长度以某种方式计算高度,但我想知道如果 YAxis 中的标签太长,是否有一种“自动”方法来调整响应容器的高度。
Here https://codesandbox.io/embed/ql20lrrkm6是一个带有一些示例数据的codesandbox。该图应适用于 itemsEg1、itemsEg2 和 itemsEg3。