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

Question

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

下图本身不是我的图表，但显示了我得到并希望避免的相同行为。

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 中使用所有 with。同样，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