线图的重新图表动画从右侧引入线条

Question

在React中潜水使用Recharts，我觉得我疯了！所有教程和示例代码行图都有这个美丽的整洁动画，感觉就像是从右到左绘制线条。但是，我已经设置了它，并且由于某种原因，动画在我的折线图上的线条从右侧浮动。我有以下行为的GIF：

我已经摆弄了动画选项（轻松，轻松，ETC），持续时间，启用或禁用动画，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>
}