FusionCharts绘制图形报表

来源：互联网发布：软件著作权硬件环境编辑：程序博客网时间：2024/05/16 14:53

首先，项目复制FusionCharts插件的相关文件

后台传送JSON字符串，前台页面接受后，通过xml文件的形式生成图形报表

Java代码如下：

/** *  类别统计报表 * @param form * @param module * @param user */private void dateChart(WebForm form, Module module, Sys_user user) {String isBj = StringUtil.isNull(StringUtil.null2String(form.get("isBj")),"-1");String startTime = StringUtil.isNull(StringUtil.null2String(form.get("startTime")),DateUtil.getToday());String endTime = StringUtil.isNull(StringUtil.null2String(form.get("endTIme")),DateUtil.getToday());Connection con = DBConnector.getconecttion();// 获取一个数据库连接try{String sql = " select max(b.name),count(a.id) from slj_info a left join slj_classify b on a.LETTERTYPE = b.ID where a.fromtime between '"+startTime+" 00:00:00' and '"+endTime+" 23:59:59'  ";// 0表示办结，1未办结 if(isBj.equals("0")){sql += " and a.LETTERSTATE  in (3,9) ";}else if(isBj.equals("1")){sql += " and a.LETTERSTATE not in (3,9) ";}sql += " group by a.lettertype order by count(a.id) desc ";ArrayList<List> typelList = ObjectCtl.getMulRowValue2(con, sql);JSONArray  obj = JSONArray.fromObject(typelList);        <span style="white-space:pre"></span>String jsonStr = obj.toString();       <span style="white-space:pre"></span>HttpServletResponse response = ActionContext.getContext().getResponse();        <span style="white-space:pre"></span>PrintWriter pw = response.getWriter();        <span style="white-space:pre"></span>pw.print(jsonStr);        <span style="white-space:pre"></span>form.addResult("startTime", startTime);        <span style="white-space:pre"></span>form.addResult("endTime", endTime);        <span style="white-space:pre"></span>form.addResult("isBj", isBj);}catch(Exception e){e.printStackTrace();}finally{DBConnector.freecon(con); // 释放数据库连接}}

前台页面代码如下：

<html><head><script src="/$!globals_sys_basename/include/morris.js-0.4.3/jquery-1.8.2.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> <script type="text/javascript" src="/$!globals_sys_basename/include/js/jquery-1.4.3.js"></script><script src="/$!globals_sys_basename/include/my97/WdatePicker.js"></script><script language="JavaScript" src="/$!globals_sys_basename/include/fusionCharts/FusionCharts.js"></script>  <script type="text/javascript">var jsonData;var type = "Pie3D";        $(function(){           $('#sreach').click(function(){               getChar();             });        });   jQuery.fn.getChat = function(data,type){              var areaObject = eval(data);              var length=areaObject.length;              var strXML = "<chart showLegend='1'  caption='事件统计分析' labelDisplay='ROTATE' slantLabels='1'  palette='2' animation='1' formatNumberScale='0' numberScaleUnit='件' xAxisName='事件分类' yAxisName='办理件数(单位:件)' baseFont='宋体' baseFontSize='12'>";              strXML = strXML+"<categories>";              for(var x in areaObject){                  strXML = strXML + "<category label='"+areaObject[x][0]+"' />";              }              strXML = strXML+"</categories>";                                          for(var x in areaObject){              if(x==0){                   strXML = strXML + " <set label='"+areaObject[x][0]+"' value='"+areaObject[x][1]+"' isSliced='1' />   ";                }else{                   strXML = strXML + " <set label='"+areaObject[x][0]+"' value='"+areaObject[x][1]+"' isSliced='0' />   ";                }              }                            strXML = strXML+"</chart>";              var chart1 = new FusionCharts("/$!globals_sys_basename/include/fusionCharts/"+type+".swf", "chart1Id", "1050", "410");              chart1.setDataXML(strXML);              chart1.render(this.get(0));         };                          function getChar(){ var a = 'doAction='+$("#doAction").val()+'&startTime='+$("#startTime").val()+"&endTime="+$("#endTime").val()+"&isBj="+$("#isBj").val();             jQuery.ajax({                  "type":"get",                  "url": "/$!globals_sys_basename/private/baobiao/baobiao.xp",                  "data":a,                  "contentType": "application/x-www-form-urlencoded",                  "success":function(data){                                jsonData = data;                                $('#chart1div').getChat(data,type);                   }               });}function toChangeValue(){type = $("#changgeType").val();//getChar();$('#chart1div').getChat(jsonData,type);}</script></head><body><form action="" method="post" id="form1" ><input type="hidden" name="doAction" id="doAction" value="dateChart" /><div><select id="changgeType" onChange="toChangeValue();"><option value="Pie3D" >饼状图</option><option value="Doughnut3D">环形图</option><option value="Bar2D" >条形图</option><option value="Column3D">柱状图</option><option value="SSGrid" >列表</option></select>  是否办结：<select id="isBj" name="isBj"><option value="-1" >所有</option><option value="0">办结</option><option value="1">未办结</option></select>  开始时间：<input type="text" id="startTime" name="startTime" value="$!startTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate"/>   结束时间：<input type="text" id="endTime" name="endTime" value="$!endTime" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate"/>   <input type="button" id="sreach" name="sreach" value=" 查 询 "  /></div><div id="chart1div"></div></form></body></html>

效果图：

0 0