如何将胜利图导出为png

Question

这可能是一个非常特殊的用例，但我有一个使用胜利图表的React应用程序。我需要得到一张图表的屏幕截图，并将其导出为png。我做了一些研究，以下是我迄今为止的一些想法：

1. 使用victory.js本身中的一些功能导出它。我能得到的最接近的是：https://github.com/FormidableLabs/victory/issues/781#event-1281057513但是这种方法不起作用。我已经测试过了。它给了我一个图表容器的参考，这可能很有用。

2. 使用一些"屏幕截图"库我尝试过saveSvgAsPng并做到了这一点：https://codesandbox.io/s/victory-chart-to-png-k9zo8但这也不起作用，我不明白为什么不起作用。

3. 使用D3.js实现胜利图表。但我也不知道该怎么做。

如果你们对如何做这类事情有任何想法，请告诉我。

Answer 1

为了保存SvgAsPng，您必须向它传递一个<SVG>元素。在上查看代码后https://codesandbox.io/s/victory-chart-to-png-k9zo8，您显然向它传递了一个Container元素。其中this.state.ref指的是Container元素，而不是<SVG>元素。将this.state.ref更改为this.state.ref.firstChild，它引用容器中的<SVG>元素。在将SVG下载为PNG的过程中，该库的工作非常有魅力。