如何通过自定义按钮调用amCharts导出功能下载图表

算力阿峰

2026-8-4

问题描述

我有一个柱状图（Column Chart），希望使用amCharts的导出功能下载图表，但不想使用amCharts自带的导出图标，而是用自定义按钮。以下是我的amCharts 4代码：

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>
<button id = "image"> export image </button>
<button id = "pdf"> export pdf </button>
<div id="chartdiv"></div>

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;
}

JS代码

/**
 * ---------------------------------------
 * 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;

请问是否可以通过这些自定义按钮，调用amCharts默认导出功能将图表导出为图片或PDF？

解决方案

完全可以通过自定义按钮调用amCharts的默认导出功能，只需完成以下几步：

1. 导入导出模块

首先在HTML中添加amCharts导出所需的脚本和样式：

<script src="https://cdn.amcharts.com/lib/4/plugins/export.js"></script>
<link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/plugins/export.css">

2. 初始化图表导出功能

在JS代码中创建完图表实例后，启用导出功能并隐藏默认的导出菜单（避免和自定义按钮冲突）：

// 启用导出功能
chart.exporting = new am4core.ExportMenu();
// 隐藏自带的导出图标菜单
chart.exporting.menu.container = null;

3. 绑定自定义按钮的导出事件

在JS代码末尾添加按钮点击事件，调用对应格式的导出方法：

// 图片导出按钮（支持png/jpeg格式）
document.getElementById('image').addEventListener('click', function() {
  chart.exporting.export('png');
});

// PDF导出按钮
document.getElementById('pdf').addEventListener('click', function() {
  chart.exporting.export('pdf');
});

完整整合代码

最终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>
<!-- 新增导出模块 -->
<script src="https://cdn.amcharts.com/lib/4/plugins/export.js"></script>
<link rel="stylesheet" href="https://cdn.amcharts.com/lib/4/plugins/export.css">

<button id="image">导出图片</button>
<button id="pdf">导出PDF</button>
<div id="chartdiv"></div>

最终JS代码

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * ---------------------------------------
 */

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

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

// 启用导出功能并隐藏默认菜单
chart.exporting = new am4core.ExportMenu();
chart.exporting.menu.container = null;

// 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;

// 绑定自定义按钮事件
document.getElementById('image').addEventListener('click', function() {
  chart.exporting.export('png');
});

document.getElementById('pdf').addEventListener('click', function() {
  chart.exporting.export('pdf');
});

额外说明

chart.exporting.export()方法支持的格式包括：png、jpeg、pdf、svg等，可按需选择。

如需自定义导出文件名、图片清晰度等参数，可传入配置对象：

chart.exporting.export('png', {
  fileName: '我的柱状图',
  pixelRatio: 2 // 提升导出图片分辨率
});

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

如何通过自定义按钮调用amCharts导出功能下载图表

HTML代码 #

CSS代码 #

JS代码 #

1. 导入导出模块 #

2. 初始化图表导出功能 #

3. 绑定自定义按钮的导出事件 #

完整整合代码 #

最终HTML代码 #

最终JS代码 #

额外说明 #