amCharts（JavaScript Charts、JavaScript Stock Chart） & amMap（JavaScript Maps）現(xiàn)在可以實(shí)現(xiàn)圖片導(dǎo)出功能，具體支持PDF、PNG、SVG等格式，兼容大多數(shù)主流瀏覽器（除了IE9，但I(xiàn)E10運(yùn)行良好）。今天我們?yōu)榇蠹抑v解JavaScript圖表amCharts在不使用服務(wù)器擴(kuò)展的情況下將圖表導(dǎo)出為PNG、JPG、SVG格式。

將圖表保存為PNG、JPG、SVG

步驟一

為文件添加以下JavaScript文件，你可以在amcharts文件目錄中找到該文件"amcharts/exporting folder"，即為文件存放地點(diǎn)。

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

可能會(huì)等上一會(huì)，你無須擔(dān)心。如果你覺得提交給服務(wù)器的文件夾過多，你可以將這些文件放在一個(gè)文件夾中。

步驟二

執(zhí)行前面的代碼，初始化圖表前添加下面代碼：

chart.exportConfig = {}

如果你的圖表設(shè)置使用JSON，記得添加exportConfig:{}哦。

步驟三

用瀏覽器打開圖表（注意：不要從服務(wù)器上打開，也不要直接從硬盤驅(qū)動(dòng)器中打開），你可以看到在圖表右下角有下載圖標(biāo)出現(xiàn)。點(diǎn)擊該圖標(biāo)，你的瀏覽器會(huì)保存圖表(amChart.png)。

你可以輕易調(diào)整下載圖片的位置、顏色，并且可以添加另外兩個(gè)功能——保存圖表為JPG或者SVG。如果你使用JavaScript Stock Chart，每一個(gè)表盤以及圖表都將保存為一個(gè)分開的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，如果你不需要瀏覽器保存文件夾，因?yàn)閳D片會(huì)在新彈出窗口打開，但是，很多情況下，瀏覽器會(huì)阻止彈出窗口。

>>下載JavaScript Charts<<

>>下載JavaScript Stock Chart<<

>>下載JavaScript Maps<<

相關(guān)教程：

不使用服務(wù)器擴(kuò)展將amCharts保存為PDF格式