我怎么知道什么时候图表准备好（线条已经出现并且动画结束了）？

Question

我想将图表复制到剪贴板。我是通过使用html2canvas npm包将图表转换为画布来实现的。

我能听见任何事件表明图表中的线已绘制并且可以安全复制到剪贴板吗？

现在，如果我等待的时间不够长，我会得到一个空图表。

Answer 1

您可以使我们使用诸如onAnimationEnd，<Line>，<Bar>等任何图表组件的<Pie>道具。只是为了清楚起见；它不是为LineChart定义的，而是为Line组件本身定义的。

我认为它没有记录在案，但就像一个饰物。

<LineChart width={730} height={250} data={data}
  margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
  <XAxis dataKey="name" />
  <Line type="monotone" dataKey="pv" stroke="#8884d8" onAnimationEnd={this.copyToCanvas} />
</LineChart>