Динамическая высота для горизонтальной диаграммы Recharts с длинными метками в YAxis - PullRequest
Новая
       23

Динамическая высота для горизонтальной диаграммы Recharts с длинными метками в YAxis

0 голосов
/ 01 мая 2019

Как я могу динамически изменить высоту моего ResponsiveContainer в Recharts, если метки в YAxis слишком длинные?

Это мой код: 

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

А вот так это выглядит, когда ярлыки слишком длинные: enter image description here

Я могу вычислить высоту как-нибудь по длине строк в метках, но я хочу знать, существует ли «автоматический» способ адаптации высоты адаптивного контейнера, если метки в YAxis слишком длинные.

Здесь - это кодовое поле с некоторыми примерами данных. Диаграмма должна работать с itemsEg1, itemsEg2 и itemsEg3.

1 Ответ

0 голосов
/ 03 мая 2019

Я не понимаю, почему вам нужно умножить длину ваших предметов на ваш рост - есть ли какое-то особое событие, которое требует этого? Вы можете просто сделать 80% или 100% для высоты, и она должна регулировать высоту в зависимости от процента экрана. Однако я бы посоветовал изменить размер шрифта yAxis, если вы можете - это может сделать больше места, чтобы надписи не перекрывались - вы также можете добавить отступы к осям yAxis, чтобы надписи тоже не перекрывались .

...