前提:需要导入chart.js
我的项目环境是:SpringMVC+mongodb
SpringMVC的controller层:
- /**
- * 查询得到财务信息报表
- * @author liupeng
- * @param request
- * @return
- * @throws UnknownHostException
- * @throws ParseException
- */
- @RequestMapping(value="/innerChartOutForFinal")
- public ModelAndView innerChartOut(HttpServletRequest request) throws UnknownHostException, ParseException{
- String timeStartemp = request.getParameter("timeStart")==null?"":request.getParameter("timeStart").toString();
- String timeEndTemp = request.getParameter("timeEnd")==null?"":request.getParameter("timeEnd").toString();
- String timeStart = getNextDate(timeStartemp, 0, Calendar.DATE, "yyyy-MM-dd");//获取当天
- String timeEnd = getNextDate(timeEndTemp, 1, Calendar.DATE, "yyyy-MM-dd");//获取后一天
- KeyRequestDao kqDao = new KeyRequestDao();
- List<KeyRequest> list = kqDao.findByTimeForFinalCommon(timeStart, timeEnd);
- SimpleDateFormat s1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
- SimpleDateFormat s2 = new SimpleDateFormat("yyyy-MM-dd");
- Date tempDate =null;
- String str = null;
- //yyyy-MM-dd HH mm ss转换为yyyy-MM-dd
- for (KeyRequest keyRequest : list) {
- tempDate = s1.parse(keyRequest.getKqTimerStart());//将时间转换为Date类型
- str = s2.format(s2.parse(s1.format(tempDate)));
- keyRequest.setKqTimerStart(str);
- }
- //横坐标:时间
- StringBuffer stringBufferX = new StringBuffer();
- //纵坐标:财务应收金额和实际到账金额
- StringBuffer stringBufferY1 = new StringBuffer();
- StringBuffer stringBufferY2 = new StringBuffer();
- String tempTime = list.get(0).getKqTimerStart();
- int tempKqAutoSum = 0;
- int tempKqAccountSum = 0;
- for (int i=0;i<list.size();i++) {
- KeyRequest keyRequest = list.get(i);
- if (keyRequest.getKqTimerStart().equals(tempTime)) {
- //应到账
- tempKqAutoSum = tempKqAutoSum + Integer.parseInt(keyRequest.getKqAutoSum());
- //实际到账
- tempKqAccountSum = tempKqAccountSum + Integer.parseInt(keyRequest.getKqAccountSum()==""?"0":keyRequest.getKqAccountSum());
- if (i==list.size()-1) {
- stringBufferX.append("'"+tempTime+"'"); //必须拼凑成这种形式,在前台的JS中才能显示,这种形式的数据为'2014-08-12'
- stringBufferX.append(",");
- stringBufferY1.append(String.valueOf(tempKqAutoSum));
- stringBufferY1.append(",");
- stringBufferY2.append(String.valueOf(tempKqAccountSum));
- stringBufferY2.append(",");
- }
- }else {
- stringBufferX.append("'"+tempTime+"'");
- stringBufferX.append(",");
- stringBufferY1.append(String.valueOf(tempKqAutoSum));
- stringBufferY1.append(",");
- stringBufferY2.append(String.valueOf(tempKqAccountSum));
- stringBufferY2.append(",");
- tempTime = keyRequest.getKqTimerStart();
- tempKqAutoSum = 0;
- tempKqAccountSum = 0;
- i--;
- }
- }
- String strx = stringBufferX.toString();
- String strY1 = stringBufferY1.toString();
- String strY2 = stringBufferY2.toString();
- System.out.println(strx);
- System.out.println(strY1);
- System.out.println(strY2);
- request.setAttribute("strx", strx);
- request.setAttribute("strY1", strY1);
- request.setAttribute("strY2", strY2);
- ModelAndView mv = new ModelAndView("/innerChart");
- return mv;
- /*
- KeyRequestDao kqDao = new KeyRequestDao();
- List<DBObject> list = kqDao.findByTimeForFinal(timeStart,timeEnd);
- //横坐标:时间
- StringBuffer stringBufferX = new StringBuffer();
- //纵坐标:财务应收金额和实际到账金额
- StringBuffer stringBufferY1 = new StringBuffer();
- StringBuffer stringBufferY2 = new StringBuffer();
- for(DBObject dbObject : list){
- stringBufferX.append(dbObject.get("kq_timer_start"));
- stringBufferX.append(",");
- stringBufferY1.append(dbObject.get("kq_autosum"));
- stringBufferY2.append(dbObject.get("kq_accountsum"));
- }
- String strY1[] = stringBufferY1.toString().split("_");
- String strY2[] = stringBufferY2.toString().split("_");
- System.out.println(stringBufferX);
- System.out.println(strY1);
- System.out.println(strY2);
- */
- }
- /**
- * 此函数实现:给定日期和经过天数,算出结果日期
- 其中sDate为指定日期,iDate为多少时间段(可以是 年、月、日... 具体根据iCal来确定)
- iCal为某种时间段例如 月:Calendar.MONTH(具体可查询api中Calendar类)
- sStr为日期格式 例如:"yyyyMMdd"(具体可查询api中Calendar类)
- * @param sDate
- * @param iDate
- * @param iCal
- * @param sStr
- * @return
- */
- public String getNextDate(String sDate, int iDate,int iCal, String sStr){
- String sNextDate = "";
- Calendar calendar = Calendar.getInstance();
- SimpleDateFormat formatter = new SimpleDateFormat(sStr);
- Date date = null;
- try {
- date = formatter.parse(sDate);
- } catch (ParseException e) {
- e.printStackTrace();
- }
- calendar.setTime(date);
- calendar.add(iCal, iDate);
- sNextDate = formatter.format(calendar.getTime());
- return sNextDate ;
- }
SpringMVC的DAO层:
- /**
- * 根据时间范围获取全部信息
- * @author liupeng
- * @param timeStart
- * @param timeEnd
- */
- public List<KeyRequest> findByTimeForFinalCommon(String timeStart, String timeEnd) {
- List<KeyRequest> kRList = new ArrayList<KeyRequest>();
- BasicDBObject obj = new BasicDBObject();
- obj.put("kq_timer_start",new BasicDBObject("$gte",timeStart).append("$lt", timeEnd));
- try{
- DBCursor dbCursor = keyRequest.find(obj).sort(new BasicDBObject("kq_timer_start",1));//以时间倒序排序,不排序的话数据会有问题,X坐标会显示相同的时间
- List<DBObject> list = dbCursor.toArray();
- for (DBObject dbObject:list) {
- KeyRequest tmp = setKeyRequest(dbObject);
- kRList.add(tmp);
- }
- }catch (Exception e) {
- e.printStackTrace();
- }
- return kRList;
- }
SpringMVC的显示层:
- <%
- String strx = (String)request.getAttribute("strx");
- String strY1 = (String)request.getAttribute("strY1");
- String strY2 = (String)request.getAttribute("strY2");
- //"January","February","March","April","May","June","July"
- %>
- <script>
- var data = {
- labels : [<%=strx%>],
- datasets : [
- {
- //曲线的填充颜色
- fillColor : "rgba(220,220,220,0.5)",
- //填充块的边框线的颜色
- strokeColor : "rgba(220,220,220,1)",
- //表示数据的圆圈的颜色
- pointColor : "rgba(220,220,220,1)",
- //表示数据的圆圈的边的颜色
- pointStrokeColor : "#fff",
- data : [<%=strY1%>]
- },
- {
- fillColor : "rgba(151,187,205,0.5)",
- strokeColor : "rgba(151,187,205,1)",
- pointColor : "rgba(151,187,205,1)",
- pointStrokeColor : "#fff",
- data : [<%=strY2%>]
- }
- ]
- };
- var options = {
- scaleOverride :false, //是否显示折线图的线条
- scaleShowLabels :true,//是否显示纵轴
- scaleShowGridLines :true,//是否显示坐标轴的标尺
- bezierCurve :true,//是否显示圆滑的效果
- pointDot :true,//是否显示折线图的顶点
- pointDotRadius :3,//折线图定点大小
- pointDotStrokeWidth:1,//折线图定点外围大小
- animation :true,//是否显示动画效果
- animationSteps :60,//图形显示的速度
- };
- var ctx = document.getElementById("bar").getContext("2d");
- var myNewChart = new Chart(ctx).Line(data,options);
- </script>