彩票走势图

不使用服务器扩展将amCharts导出为PNG图片格式的方法

原创|使用教程|编辑:龚雪|2013-12-03 09:36:07.000|阅读 1677 次

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

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

amCharts(JavaScript ChartsJavaScript 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格式


标签:

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

文章转载自:慧都控件网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP