在 YAxis 中带有长标签的 Recharts 水平条形图的动态高度

Question

如果 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>

这就是标签太长时的样子：

我可以用标签中字符串的长度以某种方式计算高度，但我想知道如果 YAxis 中的标签太长，是否有一种“自动”方式来调整响应容器的高度。

Here 是一个带有一些示例数据的代码框。该图应与 itemsEg1、itemsEg2 和 itemsEg3 一起使用。

Answer 1

我不明白为什么您需要将物品的长度乘以您的身高 - 是否发生了需要这样做的特殊事件？你可以只做80% 或100% 的高度，它应该根据屏幕的百分比调整高度。我会提出的一个建议是，如果可以的话，也更改 yAxis 字体大小 - 这可以腾出更多空间，因此标签不会重叠 - 您还可以向 yAxis 添加填充，这样标签也不会重叠.