FusionCharts绘制图形报表

最新推荐文章于 2022-08-28 20:14:00 发布

Numbgui

最新推荐文章于 2022-08-28 20:14:00 发布

阅读量521

点赞数

分类专栏： web相关 Java

本文链接：https://blog.csdn.net/numbgui/article/details/38703683

版权

web相关同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Java

6 篇文章 0 订阅

订阅专栏

首先，项目复制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" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate"/> 
				  结束时间：<input type="text" id="endTime" name="endTime" value="$!endTime" οnfοcus="WdatePicker({dateFmt:'yyyy-MM-dd'})" class="Wdate"/> 
				  <input type="button" id="sreach" name="sreach" value=" 查 询 "  />
			</div>
			<div id="chart1div"></div>
		</form>
	</body>
</html>

效果图：