调整窗口大小时如何在React中缩小表中增长的图表

Question

我正在使用可视化库React-vis，并且发现折线图或图表在使用FlexibleXYPlot组件时可以正常收缩和增长，但是一旦将其放置在具有一定宽度的表格单元格中占行的40％，当我调整窗口大小时，它会增长但不会缩小。我想知道如何获得表中表外的收缩行为。这里的代码演示了两个上下文：https://codesandbox.io/s/wk6kpxl3jk

以下内容本身并不是 my 图，而是显示了我将要避免的相同行为。

Answer 1

尝试使用vw代替%。像这样

.class {
    width: 100vw
}

您可能需要使用小于100的数字

Answer 2

我用

import ReactResizeDetector from 'react-resize-detector';

...

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

...

<ReactResizeDetector handleWidth handleHeight onResize={handleResize} />

然后将宽度作为属性添加到图表组件中。

Answer 3

这可能是一个更好的解决方案。库中有实际的响应式支持：

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