FusionCharts在服务器端导出图片(J2EE版)

首先需要下载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>