如何获取AmCharts 4柱状图的Base64图片编码

我使用AmCharts 4绘制了一个简单的柱状图，想要获取该图表图片的Base64编码，以便上传至S3存储。我曾尝试通过Canvas进行转换，但生成的Base64转为图片后仅显示坐标轴和刻度，未显示柱状条，需要获取与图表完全一致的Base64编码。

我的图表代码如下：

完整代码示例 #

JavaScript #

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);

// Add data
chart.data = [{
  "country": "USA",
  "visits": 2025
}, {
  "country": "China",
  "visits": 1882
}, {
  "country": "Japan",
  "visits": 1809
}, {
  "country": "Germany",
  "visits": 1322
}, {
  "country": "UK",
  "visits": 1122
}, {
  "country": "France",
  "visits": 1114
}, {
  "country": "India",
  "visits": 984
}, {
  "country": "Spain",
  "visits": 711
}, {
  "country": "Netherlands",
  "visits": 665
}, {
  "country": "Russia",
  "visits": 580
}, {
  "country": "South Korea",
  "visits": 443
}, {
  "country": "Canada",
  "visits": 441
}, {
  "country": "Brazil",
  "visits": 395
}];

// Create axes

var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "country";
categoryAxis.renderer.grid.template.location = 0;
categoryAxis.renderer.minGridDistance = 30;

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

// Create series
var series = chart.series.push(new am4charts.ColumnSeries());
series.dataFields.valueY = "visits";
series.dataFields.categoryX = "country";
series.name = "Visits";
series.columns.template.tooltipText = "{categoryX}: [bold]{valueY}[/]";
series.columns.template.fillOpacity = .8;

var columnTemplate = series.columns.template;
columnTemplate.strokeWidth = 2;
columnTemplate.strokeOpacity = 1;

CSS #

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 500px;
}

HTML #

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

解决方案：使用AmCharts 4内置的导出API #

直接抓取Canvas会因为AmCharts 4的分层渲染机制（尤其是启用动画主题时）丢失部分元素，官方导出API可以完整捕获整个图表。

步骤1：加载导出模块 #

在HTML中添加导出功能的脚本：

<script src="https://cdn.amcharts.com/lib/4/plugins/export.js"></script>

步骤2：配置导出功能 #

在图表初始化的JavaScript代码中，启用并配置导出：

// 启用导出菜单（可隐藏默认菜单仅保留API调用）
chart.exporting.menu = new am4core.ExportMenu();
chart.exporting.options = {
  "menu": [] // 隐藏默认导出按钮，仅通过API调用
};

步骤3：获取Base64编码 #

使用exporting.getImage()方法获取完整的图表Base64编码，注意等待动画完全渲染：

// 延迟执行，确保动画主题下图表完全渲染
setTimeout(async () => {
  try {
    // 获取PNG格式的Base64编码，支持jpg/svg等格式
    const base64 = await chart.exporting.getImage("png");
    console.log("完整图表Base64编码:", base64);
    // 此处可将base64上传至S3存储
  } catch (error) {
    console.error("获取Base64失败:", error);
  }
}, 2000); // 延迟时间可根据动画时长调整

关键说明 #

• 因为使用了动画主题，必须等待动画结束后再调用导出API，避免捕获未完全渲染的图表。
• getImage()方法支持png、jpg、svg等格式，可根据需求切换。
• 该方法会捕获图表所有元素，解决手动Canvas转换丢失柱状条的问题。

内容的提问来源于stack exchange，提问作者Faizan Naeem