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

我正在尝试为数据可视化应用程序创建自定义生殖传奇。 他用 react 和 recharts. 该组件首次可视化。 但是,当我转动图例并再次打开它时,响应容器不会压缩以适合。 如果我以像素中的大小上了解父容器的大小,但我没有关于渲染的信息。 这是一个C.错误 recharts 或者 flex box, 还是我做错了?

这是代码:
https://codesandbox.io/s/8krz9qjk52
说明:问题是,当我关闭时,然后打开一个图例,将传奇组件推出查看视图,并且该图不会被压缩回初始较小尺寸。
已邀请:

詹大官人

赞同来自:

这似乎很平庸,但是一个可行的解决方案是设置宽度 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>

要回复问题请先登录注册