带有 react-vis 的响应式饼图

Question

我正在阅读有关灵活图表的文档并尝试将它们应用于饼图：

import React from 'react'
import { RadialChart, FlexibleXYPlot } from 'react-vis'

const MyChart = ({data}) => (
  <div>
    <FlexibleXYPlot>
      <RadialChart
        data={data}
        colorType="literal"
      />
    </FlexibleXYPlot>
  </div>
)

但是在渲染这个时，我得到这样的标记：

<div>
  <div style="width: 100%; height: 100%;">
    <div class="rv-xy-plot " style="width: 0px; height: 0px;">
    </div>
  </div>
</div>

如您所见，rv-xy-plot元素的尺寸显式设置为0px。我究竟做错了什么？如何创建响应式饼图？

Answer 1

我最近在使用这个包中的许多图表时遇到了同样的问题。我发现的一个解决方法是使用React-virtualized-auto-sizer。本质上，它的作用是将需要宽度和高度的组件包裹起来，然后传递父容器（自动调整器所在的容器）的宽度和高度。下面是一个例子：

<div style={{height:'100%',width:'100%'}} className={"mb-4"}>
<AutoSizer>
    {({ height, width }) => (
        <RadialChart
            data={this.state.myData}
            width={width}
            height={height}
            onValueMouseOver={this.handleMouseOver}
            className={"mb-4"}
            labelsAboveChildren={true}
        />
    )}
</AutoSizer>

所以 autosizer 在它上面查看外部 div，计算出高度和宽度，然后将其传递给图表。