如何将AmCharts渲染为画布？

Question

我正在使用图表库AmCharts在我的网页上显示不同类型的图表。现在，我希望将所有这些图表导出为PDF。为了实现此功能，我使用KendoReact的PDFExport组件。

该图表显示为SVG，并且PDF导出不支持SVG。也就是说，导出PDF时，其中不包含图表。要解决此问题，图表需要呈现为画布而不是SVG。

关于如何将SVG转换为画布的任何想法？

请让我知道。谢谢！

Answer 1

通过使用chart.exporting.getSVG（），您将获得图表的URI格式。那么您需要先删除svg类型标头并将其解码回SVG代码，然后再将其放入画布中。

下面的代码片段可能会有所帮助

var svg = decodeURIComponent(chart.exporting.getSVG()._v).split("?>")[1]
canvg(document.getElementById('canvas'), svg);

您需要将CANVG库包含在页面中。 AMCharts在脚本中使用它。

内置于导出中的AMCharts

chart.exporting.export("pdf");

将触发图表导出为pdf（具有内置的SVG到Canvas To Image到PDF转换器）