Question

如果YAxis中的标签太长，如何在“图表”中动态更改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中的标签太长，是否有一种“自动”的方法来适应响应容器的高度。 / p>

Here是带有一些示例数据的codeandbox。该图应与itemsEg1，itemEg2和itemsEg3一起使用。

Answer 1

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

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

1 个答案: