半岛权威十大直营(官方)网站

amCharts（JavaScript Charts、JavaScript Stock Chart） & amMap（JavaScript Maps）现在可以实现图片导出功能，具体支持PDF、PNG、SVG等格式，兼容大多数主流浏览器（除了IE9，但IE10运行良好）。今天我们为大家讲解JavaScript图表amCharts在不使用服务器扩展的情况下将图表导出为PNG、JPG、SVG格式。

将图表保存为PNG、JPG、SVG

步骤一

为文件添加以下JavaScript文件，你可以在amcharts文件目录中找到该文件"amcharts/exporting folder"，即为文件存放地点。

<script src="amcharts/exporting/amexport.js" type="text/javascript"></script>
<script src="amcharts/exporting/rgbcolor.js" type="text/javascript"></script>
<script src="amcharts/exporting/canvg.js" type="text/javascript"></script>
<script src="amcharts/exporting/filesaver.js" type="text/javascript"></script>

可能会等上一会，你无须担心。如果你觉得提交给服务器的文件夹过多，你可以将这些文件放在一个文件夹中。

步骤二

执行前面的代码，初始化图表前添加下面代码：

chart.exportConfig = {}

如果你的图表设置使用JSON，记得添加exportConfig:{}哦。

步骤三

用浏览器打开图表（注意：不要从服务器上打开，也不要直接从硬盘驱动器中打开），你可以看到在图表右下角有下载图标出现。点击该图标，你的浏览器会保存图表(amChart.png)。

你可以轻易调整下载图片的位置、颜色，并且可以添加另外两个功能——保存图表为JPG或者SVG。如果你使用JavaScript Stock Chart，每一个表盘以及图表都将保存为一个分开的SVG，下面的代码是所有属性exportConfig，你可以修改所有的文件格式.

exportConfig = {
menuTop: 'auto',
menuLeft: 'auto',
menuRight: '0px',
menuBottom: '0px',
menuItems: [{
textAlign: 'center',
onclick: function () {},
icon: '../amcharts/images/export.png',
iconTitle: 'Save chart as an image',
items: [{
title: 'JPG',
format: 'jpg'
}, {
title: 'PNG',
format: 'png'
}, {
title: 'SVG',
format: 'svg'
}]
}],
menuItemStyle: {
backgroundColor: 'transparent',
rollOverBackgroundColor: '#EFEFEF',
color: '#000000',
rollOverColor: '#CC0000',
paddingTop: '6px',
paddingRight: '6px',
paddingBottom: '6px',
paddingLeft: '6px',
marginTop: '0px',
marginRight: '0px',
marginBottom: '0px',
marginLeft: '0px',
textAlign: 'left',
textDecoration: 'none'
}
}

不要包含filesaver.js，如果你不需要浏览器保存文件夹，因为图片会在新弹出窗口打开，但是，很多情况下，浏览器会阻止弹出窗口。

>>下载JavaScript Charts<<

>>下载JavaScript Stock Chart<<

>>下载JavaScript Maps<<

相关教程：

不使用服务器扩展将amCharts保存为PDF格式