来自服务器的数据时图例重叠

Question

class SearchContentChart extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    const loadLines = data => data.map((item) => {
      return <Line type="monotone" key={item.key} dataKey={item.key} name={item.name} stroke={item.color} dot={null}/>
    });

    return (
      <ResponsiveContainer height={ 300 }>
        <LineChart data={this.props.data.data || []}>
          <XAxis dataKey="name"/>
          <YAxis />
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip />
          <Legend/>
          {loadLines(this.props.data.line || [])}
        </LineChart>
      </ResponsiveContainer>
    )
  }
}

当组件第一次呈现图例重叠但从下一次呈现图表时效果很好。

从服务器端获取数据时，如何让它在第一次渲染时工作？

Answer 1

为 ResponsiveContainer 设置 debounce={1} 对我有用。

<ResponsiveContainer debounce={1}>

来自服务器的数据时图例重叠

Legend overlapping when data from server

reactjs

recharts