Rechart响应容器不会呈现

  • Z时代
  • 2024-01-10
  • 分类：问答

进出口试图呈现的条形图，以适应100％它的容器与reChart：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。

看看这个小提琴RESPONSIVECONTAINER

我添加CSS的父类，你有

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

以上是 Rechart响应容器不会呈现 的全部内容， 来源链接： utcz.com/qa/259049.html

回到顶部