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;
                      }
               
b79b
    }
                   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(var
j = 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>