1、下载干系文件

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

相信各位该当很清楚FCExporter.swf和这两个js的用场,在这我就不做多阐明了!
将两个js导入jsp页面:

js将jsp页面pdf格式Fusioncharts教程之图表组件导出图片和PDF文件 RESTful API

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里面看到:

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

本站文章除注明转载外,均为本站原创或翻译