折线图的 Rechart 动画从右侧引入线

Question

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

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

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

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

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

折线图的 Rechart 动画从右侧引入线

Rechart animation for linechart bringing in lines from right side

reactjs

recharts