原創|使用教程|編輯:龔雪|2013-12-03 09:36:07.000|閱讀 1730 次
概述:amCharts(JavaScript Charts、JavaScript Stock Chart) & amMap(JavaScript Maps)現在可以實現圖片導出功能,具體支持PDF、PNG、SVG等格式,兼容大多數主流瀏覽器(除了IE9,但IE10運行良好)。今天我們為大家講解JavaScript圖表amCharts在不使用服務器擴展的情況下將圖表導出為PNG、JPG、SVG格式。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
amCharts(JavaScript Charts、JavaScript Stock Chart) & amMap(JavaScript Maps)現在可以實現圖片導出功能,具體支持PDF、PNG、SVG等格式,兼容大多數主流瀏覽器(除了IE9,但IE10運行良好)。今天我們為大家講解JavaScript圖表amCharts在不使用服務器擴展的情況下將圖表導出為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,如果你不需要瀏覽器保存文件夾,因為圖片會在新彈出窗口打開,但是,很多情況下,瀏覽器會阻止彈出窗口。
相關教程:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件網