Rechart 响应式容器不呈现答案

【问题标题】：Rechart Responsive container does not renderRechart 响应式容器不呈现
【发布时间】：2018-05-16 18:53:27
【问题描述】：

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

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/

【问题讨论】：

看看你的控制台，你有很多未捕获的引用。
除了下面的答案之外，请确保您使用整数而不是像“100px”这样的字符串提供宽度和/或高度。为什么 Re(act)charts 决定完全放弃 Reacts 提供宽度和高度的惯用方式，这超出了我的理解。

标签： javascript css reactjs

【解决方案1】：

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

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

看看这个小提琴RESPONSIVECONTAINER

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

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

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

【讨论】：

感谢您的帮助。效果很好。我还有一个问题，你知道为什么第二个栏没有渲染吗？我只看到值为 3 的条形图。除非我也将值设置为 3，否则值为 1 的条形图不会显示。
不客气。关于这一点，我现在无法检查，因为我不在。当preValue 和postValue 相等时，两个条似乎都会出现。如果问题很紧急，我建议您发布另一个问题，并在此处留下链接以防万一。

【解决方案2】：

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

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

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

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

【讨论】：

太棒了！正是我需要的:) 谢谢！

【解决方案3】：

给响应式容器一个固定的高度

<ResponsiveContainer width="100%" height={400}>
        <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>

【讨论】：

【解决方案4】：

我无法为容器设置高度，所以我使用了aspect，它设置了 ResponsiveContainer 的高度：

 <ResponsiveContainer width={"100%"} aspect={1}>

【讨论】：

【解决方案5】：

对于在react-bootstrap 组件内渲染图表的任何人，请勿使用ResponsiveContainer 标记。您可以简单地使用其中的逻辑，它就会运行。假设您使用react-bootstrap，它看起来像这样：

<div className="question">
<div className="question-container">
        <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>
</div>

【讨论】：