原創(chuàng)|使用教程|編輯:龔雪|2013-12-03 09:36:07.000|閱讀 1730 次
概述: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格式。
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
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格式。
為文件添加以下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ì),你無(wú)須擔(dān)心。如果你覺(jué)得提交給服務(wù)器的文件夾過(guò)多,你可以將這些文件放在一個(gè)文件夾中。
執(zhí)行前面的代碼,初始化圖表前添加下面代碼:
chart.exportConfig = {}
如果你的圖表設(shè)置使用JSON,記得添加exportConfig:{}哦。
用瀏覽器打開(kāi)圖表(注意:不要從服務(wù)器上打開(kāi),也不要直接從硬盤驅(qū)動(dòng)器中打開(kāi)),你可以看到在圖表右下角有下載圖標(biāo)出現(xiàn)。點(diǎn)擊該圖標(biāo),你的瀏覽器會(huì)保存圖表(amChart.png)。
你可以輕易調(diào)整下載圖片的位置、顏色,并且可以添加另外兩個(gè)功能——保存圖表為JPG或者SVG。如果你使用JavaScript Stock Chart,每一個(gè)表盤以及圖表都將保存為一個(gè)分開(kāi)的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ì)在新彈出窗口打開(kāi),但是,很多情況下,瀏覽器會(huì)阻止彈出窗口。
相關(guān)教程:
不使用服務(wù)器擴(kuò)展將amCharts保存為PDF格式
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自:慧都控件網(wǎng)