如何将胜利图导出为png？

Question

这可能是一个非常特殊的用例，但我有一个使用 Victory Charts 的 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

为了使 saveSvgAsPng 正常工作，您必须将 <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 时就像一个魅力。