从右侧引入线条的折线图的重新绘制动画

Question

在 React 中深入使用 Recharts，我觉得我快疯了！所有的教程和示例代码折线图都有这个漂亮整洁的动画，感觉线条是从右到左绘制的。但是，我已经设置好了，出于某种原因，动画的折线图上的线条从右侧浮动。我有以下行为的 gif：

我摆弄过动画选项（缓动、缓入、ETC）、持续时间、启用或禁用动画等。无论我做什么，它总是从右侧漂浮。

有一种方法可以让图表正确绘制自己 - 如果我将它放在高度为 0 的 div 中，然后手动将高度更改为 600px，那么动画将以预期的方式播放，否则我会得到奇怪的浮动右侧线。

如上所述，这是一个反应应用程序，我的折线图的渲染代码包含在下面。

render() {

  let linesToRender = [];
  for(let i = 0; i < this.props.driverNames.length; i++) {
    let lineColor;
    if(this.props.driverNames[i].current_score < 0) {
      lineColor = 'red'
    } else {
      lineColor = 'green'
    } 
    linesToRender.push(
      <Line animationDuration={5000} type='montone' dataKey= . {this.props.driverNames[i].display_name} stroke={lineColor} />
    )
    console.log(this.props.driverNames[i])
  }



return(
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={this.props.data} height={600} width={1000}>
      {linesToRender}
     <XAxis dataKey="date" padding={{left: 30, right: 30}}/>
     <YAxis/>
     <Tooltip/>
     <Legend />
    </LineChart>
  </ResponsiveContainer>
)

}

想知道是否有其他人遇到过这个问题或可以提供任何指导。

Answer 1

我有这个问题。在我的情况下，我用 初始化了我的图表data=[]，它很快填充了我通过 api 请求检索的实际数据。

为了使我的图表正确呈现而不是像您所说的那样从侧面飞入，我完全阻止了图表的呈现，直到我确定我有我的数据数组。也许你可以做类似的事情

{this.state.data.length > 0 &&
  <LineChart data={this.state.data} >
  </LineChart>
}