服务器上png格式的图片不显示,不使用服务器扩展将amCharts导出为PNG图片格式的方法...

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"，即为文件存放地点。

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

步骤二

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

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，如果你不需要浏览器保存文件夹，因为图片会在新弹出窗口打开，但是，很多情况下，浏览器会阻止弹出窗口。

相关教程：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至hey@evget.com

文章转载自：慧都控件网