Question

我试图使用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/

Answer 1

由于ResponsiveContainer依赖于父级维度，因此您需要确保父级具有适当的width和height。

<Barchart />上的设置有效的原因是它设置了自己的width和height。

查看这个小提琴RESPONSIVECONTAINER

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

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

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

Answer 2

我无法为我的容器设置高度，所以我使用了 public SortedDictionary<string, string> GetFiles(string str) { string[] Files = str.Split('\n'); SortedDictionary<string, string> MyList = new SortedDictionary<string, string>(); foreach (string OneRow in Files) { string[] MyDelim = { " MD5 Hash = " }; string[] TwoParts = OneRow.Split(MyDelim,StringSplitOptions.None); MyList.Add(Path.GetFileName(TwoParts[0]), TwoParts[1]); } return MyList; }，它设置了 ResponsiveContainer 的高度：

aspect

Answer 3

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

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

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

参考：enter link description here

Answer 4

为响应容器提供固定高度

<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>

Rechart响应式容器无法呈现

4 个答案: