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

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>
}