如何将 AmCharts 渲染为 Canvas？答案

【问题标题】：How to render AmCharts as Canvas?如何将 AmCharts 渲染为 Canvas？
【发布时间】：2019-03-27 17:14:58
【问题描述】：

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

图表显示为 SVG，并且 PDF 导出不支持 SVG。这意味着，当导出 PDF 时，它不包含图表。要解决此问题，需要将图表呈现为画布而不是 SVG。

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

请告诉我。谢谢！

【问题讨论】：

你刚才是不是用最后一句话回答了你自己的问题？如果是这样，您应该将其发布为答案，以便其他人可以找到它。另外，这个问题很模糊，很难理解，所以你应该考虑修改它。
如果我不能以更简单的方式解释它，我深表歉意，但我觉得你没有阅读问题的标题。根据我的最后一句话，我说解决方案应该是什么。但是根据这篇文章的标题，我是问怎么做的，因为我不知道，需要帮助。
The solution to fix this problem ... 我想指出最后一句话听起来像是一个答案。您要么需要将其改写为问题，要么澄清为什么要在问题中提供类似答案的陈述。
我已尝试修改问题，如果现在有意义，请告诉我。谢谢！
AmCharts 仅输出到 SVG。为什么不使用 AmCharts 自带的 PDF 导出机制？它支持将混合内容和多个图表导出到单个 PDF 这里有一个教程：amcharts.com/docs/v4/tutorials/…

【解决方案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 到图像到 PDF 转换器）

【讨论】：