Fusioncharts教程之图表组件导出图片和PDF文件-控件新闻-慧都网

Fusioncharts教程之图表组件导出图片和PDF文件

转帖|使用教程|编辑：龚雪|2014-11-06 09:30:39.000|阅读 503 次

概述：Fusioncharts教程之图表组件如何导出图片、PDF文件。

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

【年终大促巅峰盛慧】FusionCharts XT及FusionCharts XT套包<8折>优惠，最高直降2W！

关于Fusioncharts图表组件导出图片、PDF文件的详细操作步骤如下，这里：

1、下载相关文件

要想导出图片必须下载fusionCharts 3.1以上的破解版，除了自己需要的swf文件外(包括FCExporter.swf) 还要两个js文件：

相信各位应该很清楚FCExporter.swf和这两个js的用途，在这我就不做多解释了！将两个js导入jsp页面：

2、生成报表

实现报表很简单，只需要一下几行代码即可：

1.columnChart = new FusionCharts("FCF_Column3D.swf","Report", "400", "300", "0", "1");//其他参数不做解释，最后一个参数设置为1 表示非debug模式显示报表

2.columnChart.setDataXML(data);//data为数据源加载数据

3.columnChart.render("ReportDiv");//需要显示在哪个div里绑定div的id属性

OK各位，当说到这里的时候，我要插入一点，fusionCharts加载数据有三种方式： Xml文件格式加载，Javascript的json格式加载，字符串拼凑加载。

最重要的是，在chart的属性上要包括以下三个属性：

3、右键导出

当你的界面能看到超炫的报表了，而且确保是fusionCharts 3.1以上的版本，此时您在报表上右键是绝对可以看到导出菜单的：

呵呵，到了这里，奉劝各位别高兴太早！尽管你现在导出jpg、png、或pdf都没用的，根本就没导出。别急，我们回到最开始的数据源代码，想要导出图片必须加上以下参数：

1.exportEnabled='1'(开启导出模式)

2.exportAtClient='1'(确定客户端导出)

3.exportHandler='fcExporter1' (对应前台导出处理程序的标识，网络说是写一个jsp、asp或php的路径，那是服务端导出，在这里不用)

4.exportDialogMessage='正在生成,请稍候...' (导出时的提示语)

5.exportFormats='JPG=生成JPG图片|PDF=生成PDF文件'(右键菜单格式化成中文)

到这里虽然你还无法导出图片，当就快接近尾声了，此时你可以看到的效果已经变成中文的了的。

4、前台编写导出脚本

还记得我么之前说的exportHandler='fcExporter1'吗？属性值是绑定前台导出处理程序的标识。那现在我们就来写这个处理程序。在你生成报表代码的后面添加如下代码：

01.var myExportComponent = new FusionChartsExportObject("fcExporter1","FCExporter.swf"); //参数1：为处理程序标识，参数二为：上文中提到的导出需要用到的swf文件

02.myExportComponent.componentAttributes.btnColor = 'EAF4FD';

03.myExportComponent.componentAttributes.btnBorderColor = '0372AB';

04.myExportComponent.componentAttributes.btnFontFace = 'Verdana';

05.myExportComponent.componentAttributes.btnFontColor = '0372AB';

06.myExportComponent.componentAttributes.btnFontSize = '12';

07.//Title of button

08.myExportComponent.componentAttributes.btnsavetitle = '另存为'

09.myExportComponent.componentAttributes.btndisabledtitle = '右键生成图片';

以上都是导出按钮的样式设置不做解释

最关键的是以下这行代码：参数exproterDiv表示导出按钮将在哪个div里面显示，即：我们必须在页面加上一个div 且id=exproterDiv

1.myExportComponent.Render("exproterDiv");

当这一切都成功的设置后，您再尝试右键生成jpg图片之后，你可以在id为exproterDiv里面看到：

点击’另存为’将弹出保存框：

比双十一更劲爆！【年终大促巅峰盛"慧" 】促销火热进行中 iPhone 6 Plus、 iPhone 6、iPad Air满就送，还不赶快买买买！

标签：JavaScript HTML5 图表图表开发图表解决方案图表控件 FusionCharts图表

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

文章转载自：慧都控件网

上一篇：谁说Java代码多，5分钟搞定App缓存下一篇：DevExpress使用教程：XtraGridControl动态添加右键菜单

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群