Как уменьшить растущий график в таблице в React при изменении размера окна - PullRequest
Новая
       26

Как уменьшить растущий график в таблице в React при изменении размера окна

0 голосов
/ 18 апреля 2019

Я использую библиотеку визуализации React-vis и обнаружил, что хотя линейный график или диаграмма могут сжиматься и нормально расти при использовании компонента FlexibleXYPlot, после помещения его в ячейку таблицы шириной 40%строка, в которой он находится, растет, но не уменьшается при изменении размера окна.Мне было интересно, как я могу получить сокращающее поведение, которое я получаю вне стола в столе.Код здесь, который демонстрирует два контекста: https://codesandbox.io/s/wk6kpxl3jk

Ниже приведен не мой график как таковой, но он демонстрирует то же поведение, которое я получаю и хотел бы избежать,enter image description here

Ответы [ 3 ]

0 голосов
/ 10 июня 2019

Я делаю это с 

import ReactResizeDetector from 'react-resize-detector';

...

const handleResize = () => {
   const element = window.document.querySelector('.mainWrapper');
   this.setState({ width: element.offsetWidth });
}

...

<ReactResizeDetector handleWidth handleHeight onResize={handleResize} />

Затем добавьте ширину в качестве опоры для компонента диаграммы.

0 голосов
/ 10 июня 2019

Возможно, это лучшее решение.В библиотеке есть реальная адаптивная поддержка: 

import {
  FlexibleXYPlot,
  FlexibleWidthXYPlot,
  FlexibleHeightXYPlot
} from 'react-vis';

FlexibleWidthXYPlot изменяет XYPlot так, что ему больше не требуется ширина, поскольку он будет принимать все с в своем контейнере div.Аналогично, FlexibleHeightXYPlot изменяет XYPlot так, что ему больше не требуется высота, и его высота будет равна его контейнеру div.Наконец, FlexibleXYPlot изменяет XYPlot таким образом, что ему больше не требуются ширина и высота, его размеры будут такими же, как у его контейнера.

Эти компоненты могут использоваться точно так же, как XYPlot: 

<FlexibleWidthXYPlot height={100}>
  <VerticalBarSeries data={data} />
</FlexibleWidthXYPlot>

<FlexibleHeightXYPlot width={100}>
  <VerticalBarSeries data={data} />
</FlexibleHeightXYPlot>

<FlexibleXYPlot>
  <VerticalBarSeries data={data} />
</FlexibleXYPlot>

Подробнее:

https://github.com/uber/react-vis/blob/master/docs/flexible-plots.md

0 голосов
/ 18 апреля 2019

Попробуйте использовать vw вместо %. Как это 

.class {
    width: 100vw
}

Возможно, вам придется использовать меньшее число, чем 100, хотя

...