欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>