Rechart響應容器不會呈現

Question

進出口試圖呈現的條形圖，以適應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/

Answer 1

由於ResponsiveContainer依賴於父母的尺寸，你需要確保親本與適當width和height。

<Barchart />上設置的原因是因爲它設置了自己的width和height。

看看這個小提琴RESPONSIVECONTAINER

我添加CSS的父類，你有

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

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