FusionCharts在服务器端导出图片(J2EE版) 博客分类: Flex JSPServletWebXML
程序员文章站
2024-03-01 23:00:34
...
首先需要下载FusionCharts v3.1的swf文件,还需要下载FusionCharts.js和FusionChartsExportComponent.js两个JS文件(要下载跟v3.1匹配的版本),还要下载fcexporter.jar文件(要匹配v3.1版本),还要下载对应的Java文件(如截图)[img]http://static12.photo.sina.com.cn/orignal/4f925fc3g96a28a65f47b&690[/img],还有对应的JSP文件FCExporter.jsp、FCExporterError.jsp、FCExporter_IMG.jsp、FCExporter_PDF.jsp 。 【注】:如果下载的版本不一致就会导出失败! 下载完所有需要的文件后就该进行配置了: 第一步:在web.xml里编写如下代码: <servlet> <display-name>FCExporter</display-name> <servlet-name>FCExporter</servlet-name> <servlet-class>com.fusioncharts.exporter.servlet.FCExporter</servlet-class> </servlet> <servlet-mapping> <servlet-name>FCExporter</servlet-name> <url-pattern>/FCExporter</url-pattern> </servlet-mapping> 第二步:在src目录下建立fusioncharts_export.properties文件,需要编写的内容如下: EXPORTHANDLER = FCExporter_ RESOURCEPATH = /Resources/ SAVEPATH = ./savefiles/ HTTP_URI = http://localhost:8080/Broadband Aware Admin/savefiles/ #HTTP_URI = http://www.yourdomain.com/savefiles/ #HTTP_URI = http://192.168.0.10/ProjectName/savefiles/ OVERWRITEFILE = false INTELLIGENTFILENAMING = true FILESUFFIXFORMAT = TIMESTAMP 【注】:RESOURCEPATH 配置的是FCExporter_IMG.jsp、FCExporter_PDF.jsp两个文件所在的路径(我的 FCExporter_IMG.jsp、FCExporter_PDF.jsp文件放在了WebRoot下面的Resources文件夹里了), SAVEPATH 配置的是导出图片保存路径(需要在工程里事先建好),HTTP_URI 配置的是保存图片的服务器 的绝对路径。(其他的属性不要变,否则会出问题) 第三步:写html页面,关键代码如下: <script type="text/javascript" src="../share/chartjs/FusionCharts.js"></script> <script type="text/javascript" src="../share/chartjs/FusionChartsExportComponent.js"></script> <script type="text/javascript"> //导出图片后调用的回调函数 function FC_Exported(objRtn){ if (objRtn.statusCode=="1"){ alert("The chart with DOM Id " + objRtn.DOMId + " was successfully saved on server. The file can be accessed from " + objRtn.fileName); }else{ alert("The chart with DOM Id " + objRtn.DOMId + " could not be saved on server. There was an error. Description : " + objRtn.statusMessage); } } //导出图片调用的方法 function startExport(){ var chart = getChartFromId("myFusionExport"); //生成的FusionCharts图表本身的标识 //if (chart.hasRendered()==true){ if (chart.hasRendered()){ chart.exportChart(); }else{ alert("Please wait for the chart to finish rendering, before you can invoke exporting"); } } </script> <input type='button' value='生成FusionCharts图表' onClick="showFusionCharts();" /> <input type='button' value='导出FusionCharts图片' onClick="javascript:startExport();" /> <div id="myFusion"></div> <script type="text/javascript"> function showFusionCharts(){ var xmlData = "chart palette='2' caption='按地市统计报表-不达标数' xAxisName='地市' yAxisName='' showToolTip='0' showValues='1' formatNumberScale='0' rotateNames='0' decimals='0' useRoundEdges='1' exportEnabled='1' exportAtClient='0' exportAction='save' exportFileName='weeksnotsucced' exportDialogMessage='正在导出,请稍候...' exportHandler='http://localhost:8080/Broadband Aware Admin/FCExporter.jsp' exportShowMenuItem='1'>" + "<set name='Jan' value='462' color='AFD8F8' />" + "<set name='Feb' value='857' color='F6BD0F' />" + "<set name='Mar' value='671' color='8BBA00' />" + "</chart>"; var chart = new FusionCharts ("../chartswf/Column3D.swf", "myFusionExport", "450", "280", "0", "0"); chart.setDataXML(xmlData); chart.render("myFusion"); //放置图表的DIV的ID } </script>