2

这可能是一个非常特殊的用例，但我有一个使用 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 的实现来构建胜利图表。但我也不知道该怎么做。

如果你们对如何完成这种事情有任何想法，请告诉我。

4

1 回答 1

0

为了使 saveSvgAsPng 工作，您必须将一个<SVG>元素传递给它。在https://codesandbox.io/s/victory-chart-to-png-k9zo8查看您的代码后，您显然Container向它传递了一个元素。Therethis.state.ref指的是 Container 元素，但不是<SVG>元素。更改this.state.ref为this.state.ref.firstChild哪个是指<SVG>容器中的元素。该库在将 SVG 下载为 PNG 时就像一个魅力。

于 2021-12-06T07:00:48.227 回答