G2 如何将图表保存为图片格式

Question

在某些业务场景下，可能会有将图表导出为图片的需求，G2 提供了可以获取图表 Canvas/Svg Dom 实例的方法，获取后可以将其转为 Png 格式的图片并保存

以下为在使用默认 Canvas 绘图引擎时导出图表为图片的代码

import { Chart } from "@antv/g2";

const data = [
  { item: "事例一", count: 40, percent: 0.4 },
  { item: "事例二", count: 21, percent: 0.21 },
  { item: "事例三", count: 17, percent: 0.17 },
  { item: "事例四", count: 13, percent: 0.13 },
  { item: "事例五", count: 9, percent: 0.09 },
];

const chart = new Chart({
  container: "container",
  autoFit: true,
  height: 500,
});

chart.coordinate("theta", {
  radius: 0.75,
});

chart.data(data);

chart.scale("percent", {
  formatter: (val) => {
    val = val * 100 + "%";
    return val;
  },
});

chart.tooltip({
  showTitle: false,
  showMarkers: false,
});

chart
  .interval()
  .position("percent")
  .color("item")
  .label("percent", {
    content: (data) => {
      return `${data.item}: ${data.percent * 100}%`;
    },
  })
  .adjust("stack");
chart.render();

function exportCanvasAsPNG(canvasElement, fileName) {
  var MIME_TYPE = "image/png";
  var imgURL = canvasElement.toDataURL(MIME_TYPE);
  var dlLink = document.createElement("a");
  dlLink.download = fileName;
  dlLink.href = imgURL;
  dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(
    ":"
  );
  document.body.appendChild(dlLink);
  dlLink.click();
  document.body.removeChild(dlLink);
}
const canvas = chart.canvas.get("el");
// 模拟用户触发下载操作
setTimeout(() => {
  exportCanvasAsPNG(canvas, "图片名称");
}, 5000);

总结一下

可以通过 chart.canvas.get('el') 方法获取到图表 Canvas/Svg Dom 实例，随后进行自由操作即可。