fushionChars画动态统计图

1.     准备fushionCharts资源包括js文件和swf文件，引用js文件<scripttype="text/javascript"src="fusioncharts31/js/FusionCharts.js"></script>

2.     这个例子是通过servlet获取数据，因此要编写一个获取数据的servlet类。这里是CertificatePStatistics类

public voiddoPost(HttpServletRequest request, HttpServletResponse response)

         throws ServletException,IOException {

      try {

         getJSONData(request,response);

      } catch (Exception e) {

         logger.error(e.getMessage(),e);

      }

   }

 

   /**

    * 根据sql取得JSON格式的数据

    *

    * @return

    * @throws IOException

    */

   private voidgetJSONData(HttpServletRequest req, HttpServletResponse resp)

         throws WIZException,IOException {

      try {

         String sql = URLDecoder.decode(req.getParameter("SQL"),

                SysData.UTF8);

         // 根据jqGrid对JSON的数据格式要求给jsonObj赋值

         JSONObject jsonObj = new JSONObject();

         Document docData = BaseDB.executeQuery(sql);

         jsonObj = JSONUtil.docRecord2JsonStr(docData,-1, -1);

         resp.setCharacterEncoding(SysData.UTF8);

         resp.getWriter().print(jsonObj);

         /*resp.getWriter().print("12345");*/

      } catch (Exception e) {

         logger.error(e.getMessage(),e);

         throw new WIZException(e);

      }

   }

3.     配置类：在web.xml里添加配置语句：

4.     前台页面：

<div id="ceterficateGraficDiv"align="center"></div>

5.     JS调用：

这里通过ajax获取数据并以json的形式返回。

<scripttype="text/javascript">

 

      function statisticsShow() {

         var departmentSql = document.getElementById("statisticsSQlTxt").value; //sql语句

         $.ajax({

            url : "/Web/CertificatePStatistics",//返回数据的类

            dataType : "json",

            type : "POST", //调用servle的post方法

            data : {

                SQL : encodeURI(departmentSql) //传sql参数

            },

            async : false,

                error : function() {

                   alert("加载数据错误!");

                   return;

                },

               

                success : function(jsonData) {//将得到的数据封装在’jsonData’变量里

                   if (jsonData.rows.length == 0) {

                      document.getElementById("ceterficateGraficDiv").style.display="none";

                      document.getElementById("statisticsTabDiv").style.display="none";

                      return;

                   }

                  

                   document.getElementById("ceterficateGraficDiv").style.display="";

                   document.getElementById("statisticsTabDiv").style.display="";

                   //alert(jsonData.rows[0].STATUS);

   /*开始用jsonData编制XML文件，按照fushionchart的例子编制XML文件 */

                   var data = "<chart palette='2' caption='' xAxisName=''yAxisName='' ";

                   data+="showValues='0' decimals='0' formatNumberScale='0'unescapeLinks='0'>";

 

                   /*XML：categories*/

                   data += "<categories>";

                   var differName="";

                   for ( var i = 0; i < jsonData.rows.length; i++) {

                      varrowData = jsonData.rows[i];

                      varlabelName = rowData.LABEL_NAME;

                      if(labelName != differName) {

                         data += "<categorylabel='"+labelName+"'/>";

                         differName = labelName;

                      }

                   }

                   data += "</categories>";

 

                   var seriesLabel = new Array("已登记","已注册","预警",

                         "失效");

 

                   for ( var i = 0; i < seriesLabel.length; i++) {

                      data += "<datasetseriesName='"+seriesLabel[i]+"'>";

                      differName = jsonData.rows[0].LABEL_NAME;

                      varflag =false;

                      for(varj = 0; j < jsonData.rows.length; j++) {

                         varrowData = jsonData.rows[j];

                         varlabelName = rowData.LABEL_NAME;

                         varstatus = rowData.ECSTATUS;

 

                         if(labelName == differName) {

                            if(seriesLabel[i] == status) {

                               data += "<set value='"+rowData.NUM+"' ";

   //向下钻取，弹出窗，带参数。fusionCharts绘图要求xml文件里，双引号之间不能出现单引号，因此传参数时需要先htmlEncode ，解参数时需要htmlDecode                     data+="link='P-detailsWin,width=800,height=200,toolbar=no,scrollbars=yes,resizable=no,location=no,"

   //将弹出窗放在页面中间                          data+="left="+(screen.width-800)/2+",top="+(window.screen.availHeight-200)/2+",";

                               data+="resizable=no-Test.html?flag="+getDrillCondition(labelName)+"'/>";

                               /* data+="<setvalue='"+rowData.NUM+"'/>"; */

                               flag = true;

                            }

                         } else{

                            if(flag ==false) {

                               data += "<setvalue='0'/>";

                            }

                            if(seriesLabel[i] == status) {

                               data += "<set value='"+rowData.NUM+"' ";

                            data+="link='P-detailsWin,width=800,height=200,toolbar=no,scrollbars=yes,resizable=no,location=no,"

                              data+="left="+(screen.width-800)/2+",top="+(window.screen.availHeight-200)/2+",";

                               data+="resizable=no-Test.html?flag="+getDrillCondition(labelName)+"'/>";

                               /* data+="<setvalue='"+rowData.NUM+"'/>"; */

                               flag = true;

                            } else{

                               flag = false;

                            }

                            differName = labelName;

                         }

                      }

                      if(flag ==false) {

                         data += "<setvalue='0'/>";

                      }

                      data += "</dataset>";

                   }

                   data += "</chart>";

                  //alert(data);

                   //document.getElementById("statisticsSQlTxt").value=data;

                   var ecCharts = new FusionCharts(

      //画多维表时需要用*3D.swf，否则会报’invalid xml data’错误                 "fusioncharts31/charts/MSColumn3D.swf",

                         "ceterficateGraficDiv1","800","400","0", "1");

                   ecCharts.setDataXML(data);

                   ecCharts.render("ceterficateGraficDiv");

               

            }

         });

           

      }

   </script>