Rechart 响应容器不呈现

Question

我正在尝试使用 reChart 呈现条形图以 100% 适合其容器：

http://recharts.org/#/zh-CN/api/ResponsiveContainer

  <div className="question">
    <div className="question-container">
        <ResponsiveContainer width="100%" height="100%">
            <BarChart   layout="vertical" data={rows}
                      margin={{top: 5, right: 30, left: 20, bottom: 5}}>

                <YAxis axisLine={false} tickLine={false} width={400} dataKey="name" type="category">
                </YAxis>
                <Bar dataKey="valuePre" fill="#00a0dc" label={<Text scaleToFit={true} verticalAnchor="middle" />}/>
                <Bar dataKey="valuePost" fill="#c7c7c7"  label={<Text verticalAnchor="middle" />}/>

            </BarChart>
        </ResponsiveContainer>
    </div>
</div>

当我添加 ResponsiveContainer 组件时，数据停止呈现。一旦我取出 ResponsiveContainer 并设置 BarChart 组件的宽度和高度，我就可以再次看到条形图。

谁能帮我发现我做错了什么？

这是一个解决问题的小提琴：

http://jsfiddle.net/eyh80eeo/

原文由 Pablo Estrada 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

由于 ResponsiveContainer 依赖于父级的尺寸，您需要确保父级具有正确的 width 和 height 。

<Barchart /> 上的设置之所以起作用，是因为它设置了自己的 width 和 height 。

看看这个小提琴 RESPONSIVECONTAINER

我将 CSS 添加到您的父类中

.question {
  width: 500px;
  height: 500px;
}

.question-container {
  width: 100%;
  height: 100%;
}

原文由 Nandu Kalidindi 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 CSS 网格中使用 ResponsiveContainer 组件时，我遇到了类似的问题。

我只是将 width={'99%'} 添加到 ResponsiveContainer 并正确调整了大小。

<ResponsiveContainer width={'99%'} height={300}>

参考： Recharts Responsive Chart not responsive inside a CSS grid

原文由 Ralph Willgoss 发布，翻译遵循 CC BY-SA 4.0 许可协议