extjs3.3 + fushioncharts + velocity 实现折线图

最新推荐文章于 2019-07-12 11:45:15 发布

种代码的农民工

最新推荐文章于 2019-07-12 11:45:15 发布

阅读量525

点赞数 1

文章标签： velocity extjs

本文链接：https://blog.csdn.net/u014729313/article/details/52024986

版权

啥也不说，直接上代码

先放入一个panel

 //折线图pannel
       var linePanel= new Ext.Panel({
		   autoHeight:true,
                   layout:'fit',
                   id:'center',
		   html:'<div id="chartdiv" align="center">1</div>'  //此处div是用来嵌套flash插件
	   });

//定义方法通过ajax请求折线图数据,<span style="font-family: Arial, Helvetica, sans-serif;">startDate,endDate是查询条件，如不需要可无视</span>
       function getLineDate(startDate,endDate){
	        Ext.Ajax.request({
                url:'/statistics/member/memberListForStatistics?startTime=' + startDate + "&endTime=" + endDate,
                success: function(response, opts){
                	var jsret =  Ext.decode(response.responseText);
                    var chart = new FusionCharts(escape("/static/js/fusioncharts/Charts/FCF_MSLine.swf"), "chartdiv", "1100", "550");
                    chart.setDataXML(jsret.data);  //通过ajax请求获取折线图数据
                    chart.render("chartdiv");
                },
                failure: alert("falure");
            });
        }

	public  Map<String, Object> memberListForStatistics(HttpServletRequest request) throws ParseException{
		Map<String, Object> map = new HashMap<String, Object>();
		//paramsMap用于封装分页参数和查询参数
		Map<String,Object> paramsMap = new HashMap<String,Object>();
		//设置分页参数
	        String startTime = request.getParameter("startTime");
		String endTime = request.getParameter("endTime");
		try {
			if(StringUtils.isNotEmpty(startTime)){
				paramsMap.put("startTime", DateFomatUtil.String2Date(startTime, "yyyy-MM-dd"));
			}
			if(StringUtils.isNotEmpty(endTime)){
				paramsMap.put("endTime", DateFomatUtil.String2Date(endTime, "yyyy-MM-dd"));
			}
		} catch (ParseException e) {
			e.printStackTrace();
		}
		List<MemberStatisticsCommand>  list= memberStatisticsService.getStatisticsList(paramsMap);
		map.put("data", buildXmlData(startTime, endTime, list));
		
		return map;
	}

设构建折线图返回的数据，返回的是一个XML数据

public String buildXmlData(String startDate, String endDate, List<MemberStatisticsCommand> list){
		if(CollectionUtils.isNotEmpty(list)){
			startDate = list.get(list.size() - 1).getCreateTimeView();
			endDate = list.get(0).getCreateTimeView();
		}
		String graph = "<graph caption=\"用户统计折线图\" subcaption=\"(" + startDate + " to "  + endDate +")\" hovercapbg=\"FFECAA\" hovercapborder=\"F47E00\" " + 
				"formatNumberScale=\"0\" decimalPrecision=\"0\" showvalues=\"0\" numdivlines=\"10\" " + 
				"numVdivlines=\"0\" yaxisminvalue=\"0\" yaxismaxvalue=\""+getYaxismaxvalue(list)+"\" rotateNames=\"1\">";
		StringBuilder sb = new StringBuilder("");
		StringBuilder categories = new StringBuilder("<categories>");
		StringBuilder newMember = new StringBuilder("<dataset seriesName=\"每天新用户\" color=\"1D8BD1\" anchorBorderColor=\"1D8BD1\" anchorBgColor=\"1D8BD1\">");
		StringBuilder wxMember = new StringBuilder("<dataset seriesName=\"微信用户\" color=\"2AD62A\" anchorBorderColor=\"2AD62A\" anchorBgColor=\"2AD62A\">");
		StringBuilder qqMember = new StringBuilder("<dataset seriesName=\"qq用户\" color=\"009900\" anchorBorderColor=\"009900\" anchorBgColor=\"009900\">");
		StringBuilder wbMember = new StringBuilder("<dataset seriesName=\"微博用户\" color=\"9933FF\" anchorBorderColor=\"DBDC25\" anchorBgColor=\"DBDC25\">");
		StringBuilder mobileMember = new StringBuilder("<dataset seriesName=\"手机用户\" color=\"008B00\" anchorBorderColor=\"DBDC25\" anchorBgColor=\"DBDC25\">");
		StringBuilder hspMember = new StringBuilder("<dataset seriesName=\"惠锁屏用户\" color=\"EE1289\" anchorBorderColor=\"DBDC25\" anchorBgColor=\"DBDC25\">");
		StringBuilder allMember = new StringBuilder("<dataset seriesName=\"用户量\" color=\"17f0ff\" anchorBorderColor=\"DBDC25\" anchorBgColor=\"DBDC25\">");
		if(CollectionUtils.isNotEmpty(list)){
			MemberStatisticsCommand command = null;
			for (int i = list.size() -1; i >= 0; i--) {
				command = list.get(i);
				categories.append("<category name=\"" + DateFomatUtil.formatToString(command.getCreateTime(), "yyyy-MM-dd") + "\"/>");
				newMember.append("<set value=\"" + command.getNewIncrementNum()+ "\" />");
				wxMember.append("<set value=\"" + command.getIncrementNumWeixin() + "\" />");
				qqMember.append("<set value=\"" + command.getIncrementNumQq() + "\" />");
				wbMember.append("<set value=\"" + command.getIncrementNumWeibo() + "\" />");
				mobileMember.append("<set value=\"" + command.getIncrementNumSms() + "\" />");
				hspMember.append("<set value=\"" + command.getIncrementNumHsp() + "\" />");
				allMember.append("<set value=\"" + command.getTotalUserNum() + "\" />");
			}
		}
		categories.append("</categories>");
		newMember.append("</dataset>");
		wxMember.append("</dataset>");
		qqMember.append("</dataset>");
		wbMember.append("</dataset>");
		mobileMember.append("</dataset>");
		hspMember.append("</dataset>");
		allMember.append("</dataset>");
		sb.append(graph).append(categories).append(newMember).append(wxMember).append(qqMember).append(wbMember).
		   append(mobileMember).append(hspMember).append("</graph>");
		return sb.toString();
	}

	
	 // 获取折线图Y轴最大值
	private int getYaxismaxvalue(List<MemberStatisticsCommand> list){
		int maxNum = 0;
		for (MemberStatisticsCommand command : list) {
			maxNum = ( maxNum >= command.getNewIncrementNum() ? maxNum : command.getNewIncrementNum() );
		}
		return maxNum;
	}