9

我正在尝试为我的数据可视化应用程序创建一个自定义的可折叠图例。它使用反应和图表。该组件第一次渲染得很好。但是当我折叠图例并重新打开它时，响应式容器不会缩小以适应。如果我知道父容器的大小（以像素为单位），这会更容易，但我没有关于渲染的信息。这是图表或弹性框的错误还是我做错了？

继承人的代码：https ://codesandbox.io/s/8krz9qjk52

澄清：问题是当我关闭然后打开图例时，图例组件被推出查看区域并且图表不会收缩回原来的较小尺寸。

4

4 回答 4

26

这似乎相当 hacky，但一个可行的解决方法是将宽度设置为 99%，并带有高度或纵横比。

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

看到这个问题：

https://github.com/recharts/recharts/issues/172

于 2018-11-08T10:28:44.187 回答
5

我知道这是一个非常老的问题，但我在这里发帖以防其他人通过谷歌登陆这里。

我不知道为什么会这样，但设置position: absolute将.recharts-wrapper完全解决这个问题。到目前为止，我没有发现任何缺点，但是 YRMV。

于 2021-09-15T23:04:29.197 回答
1

由于我在我的项目中遇到了类似的问题，所以我决定坚持这个问题。我终于能够得到一个可行的解决方案！

密码箱

我将从最大到最小列出我所做的更改：

我将状态 从提升CustomLegend到CustomChart。

  • 现在，CustomChart负责发生的事情。CustomLegend它将可见性信息作为道具传递给。如何CustomChart知道何时改变状态？

  • CustomChart有一个被调用的成员函数handleButtonClick来设置它的状态。作为道具handleButtonClick发送到。CustomLegend所以CustomChart渲染CustomLegend如下：

    <CustomLegend
    items={legendData}
    onClick={this.handleButtonClick}
    legendVisible={this.state.legendVisible}
/>

    现在在 中CustomLegend，我们可以将其包含在button定义中：onClick={this.props.onClick}请注意，此模式仅在原始函数绑定到父函数时才有效，因为它改变了父函数的状态。

chart-container现在是一个CSS Grid容器。

  • 它根据状态呈现处理列宽的内联样式。

    <div
    className="chart-container"
    style={{
      gridTemplateColumns: this.state.legendVisible
        ? "80% 1fr"
        : "1fr min-content"
    }}
>

    请注意，这1fr是一个分数单位，在这种情况下，用于填充剩余空间。

  • In styles.css,grid-auto-flow设置为column允许将事物作为列放置在网格中。我们放入网格的东西是SampleChart和CustomLegend，SampleChart左列CustomLegend也是 右列。
  • gridTemplateColumns: 80% 1fr：当图例可见时，我们希望左列占据 80% 的宽度，右列填充其余部分。
  • gridTemplateColumns: 1fr min-content：当图例不可见时，我们希望右列占用其元素填充的最小空间，左列填充剩余空间。

CustomLegend只有一个render方法。

  • 代替renderVisibleand renderHidden，有一种方法可以有条件地渲染legend-list基于道具（取决于CustomChart的状态）。
  • 现在legend-container总是渲染（它是一个网格项目）。

其他小改动：

  • In SampleChart：<ResponsiveContainer width="100%" height="100%" className={props.className}>这已更改，因为<SampleChart className="chart-area" data={data} />实际上是className作为道具发送的。小心这个！您需要className直接在SampleChart的返回层次结构中的父标记上设置（在本例中为ResponsiveContainer）。尝试回到原来的代码框并更改background-coloron chart-areain styles.css（没有任何反应！）。
  • overflow: scroll在所有情况下，styles.css因为我们不再需要它。

您会注意到，如果您尝试仅使用fr单位或任何 flex 布局的网格布局chart-container，图表将无法正确调整大小。不幸的是，RechartsResponsiveContainer不能很好地与 Grid 或 Flexbox 配合使用（该项目的主要贡献者正在逐渐减少支持——截至目前 3 个月内没有提交）。

于 2018-06-20T19:20:57.367 回答
-1

将以下内容添加到您的styles.css:

html, body, #root {
  width: 100%;
  height: 100%;
}

否则.chart-container，即使它的宽度和高度设置为 100%，也不会占据整个视口。然后在 中SampleChart.jsx，改变这个：

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

对此：

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

让你ResponsiveContainer的身高……嗯，反应灵敏。

于 2018-06-16T21:05:06.397 回答