Как сделать AmCharts как Canvas?

Question

Я использую библиотеку диаграмм AmCharts для отображения различных типов диаграмм на моей веб-странице. Теперь я хочу, чтобы все эти графики были экспортированы в PDF. Чтобы реализовать эту функцию, я использую компонент PDFExport KendoReact.

Диаграмма отображается в формате SVG, а экспорт в PDF не поддерживает SVG. Это означает, что когда PDF экспортируется, он не включает в себя диаграммы. Чтобы исправить это, диаграммы должны быть отображены как холст, а не как SVG.

Есть идеи, как я могу конвертировать этот SVG в canvas?

Пожалуйста, дайте мне знать. Спасибо!

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 to PDF)