Recharts Responsive Container 错误地改变了大小 flexbox

这似乎很平庸，但是一个可行的解决方案是设置宽度 99% 高度或宽高比。

<responsivecontainer aspect="{3}" width="99%">

查看此问题：

https://github.com/recharts/recharts/issues/172
</responsivecontainer>

由于我在我的项目中存在类似的问题，我决定坚持这个问题。 最后，我能够获得工作决定！

https://codesandbox.io/s/xpz8y5w77w
我会列出我最大的更改，最小的更改：

一世
https://reactjs.org/docs/lifting-state-up.html
从

CustomLegend

到

CustomChart

.


现在

CustomChart

负责发生的事情。 它传输有关可见性的信息

CustomLegend

作为支持。 如何

CustomChart

在需要更改状态时学习？

CustomChart

有一个名为的成员函数

handleButtonClick

, 这使他的病情。

handleButtonClick

船B.

CustomLegend

作为支持。 所以，

CustomChart

剪辑

CustomLegend

像这样：

<customlegend items="{legendData}" legendvisible="{this.state.legendVisible}" onclick="{this.handleButtonClick}"></customlegend>

现在B.

CustomLegend

我们可以在定义中包含它

button

:

onClick={this.props.onClick}

请注意，如果初始函数绑定到父级，则此模板仅适用，因为它更改了父级的状态。

chart-container

现在是
https://gridbyexample.com/examples/
容器。


它根据状态显示将列宽处理的内置样式。

<div "1fr="" "80%="" 1fr"="" :="" ?="" classname="chart-container" gridtemplatecolumns:="" min-content"="" style="{{" this.state.legendvisible="" }}="">

注意

1fr

- 这是一个分数单位，在这种情况下，它可以填充剩余空间。

在

styles.css

价值

grid-auto-flow

一样

column

, 这允许您以列的形式将对象放入网格中。 我们放入网格的东西， - 这是

SampleChart

和

CustomLegend

, 所以

SampleChart

-log列，和

CustomLegend

-正确的。

gridTemplateColumns: 80% 1fr

: 当图例可见时，我们希望左栏占用 80% 宽度和右栏填充 rest.

gridTemplateColumns: 1fr min-content

: 当图例是不可见的，我们希望右栏占用填充其元素的最小空间，左列填充剩余空间。

CustomLegend

只有一种方法

render

.

反而

renderVisible

和

renderHidden

有一个方法有条件呈现

legend-list

基于必要条件 /将取决于国家

CustomChart

/.

legend-container

现在始终呈现 /这是一个网格元素/.

其他小变化：

在

SampleChart

:

<responsivecontainer classname="{props.className}" height="100%" width="100%">

它被改变，因为

<samplechart classname="chart-area" data="{data}"></samplechart>

实际上是发

className

作为支持。 小心！ 你需要安装

className

直接在返回的层次结构中的父标记上

SampleChart

/在这种情况下

ResponsiveContainer

/. 试着返回K.
https://codesandbox.io/s/8krz9qjk52
并改变

background-color

在

chart-area

在

styles.css

/什么都没发生！/.

overflow: scroll

在所有情况下

styles.css

, 因为他不再需要。

你会注意到 , 如果您尝试仅使用网格布局，该怎么办？

fr

测量单位或任何灵活的布局

chart-container

, 图的大小不会正确更改。 很遗憾， Recharts'

ResponsiveContainer

只是不好玩 Grid 或者 Flexbox /项目中的主要参与者逐渐减少支持 –
https://github.com/recharts/re ... ivity
期间 3 此时几个月/.
</responsivecontainer></div>
<div class="answer_text">
将以下内容添加到您的

styles.css

:

html, body, #root {

 width: 100%;

 height: 100%;

}

否则

.chart-container

, 即使安装了宽度和高度 100%,, 它不会占据整个物种屏幕。 然后B.

SampleChart.jsx

更改：

<responsivecontainer height="{400}" width="100%">

为此：

<responsivecontainer height="100%" width="100%">

让你的身高

ResponsiveContainer

'... 好吧，响应。
</responsivecontainer></responsivecontainer></div>

将以下内容添加到您的

styles.css

:

html, body, #root {

 width: 100%;

 height: 100%;

}

否则

.chart-container

, 即使安装了宽度和高度 100%,, 它不会占据整个物种屏幕。 然后B.

SampleChart.jsx

更改：

<responsivecontainer height="{400}" width="100%">

为此：

<responsivecontainer height="100%" width="100%">

让你的身高

ResponsiveContainer

'... 好吧，响应。
</responsivecontainer></responsivecontainer>