javascript - 响应式容器未呈现

我正在尝试绘制一个条形图以使其容器100％具有reChart:

http://recharts.org/#/en-US/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/

最佳答案

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

之所以对<Barchart />进行设置，是因为它设置了自己的width和height。

看看这个 fiddle RESPONSIVECONTAINER

我将CSS添加到您拥有的父类中

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

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

关于javascript - 响应式容器未呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47614196/