chart.js操作实例（前后台互通）

前提：需要导入chart.js

            我的项目环境是：SpringMVC+mongodb

SpringMVC的controller层：

[java] view plain copy

1. /** 
2.      * 查询得到财务信息报表 
3.      * @author liupeng 
4.      * @param request 
5.      * @return 
6.      * @throws UnknownHostException 
7.      * @throws ParseException  
8.      */  
9.     @RequestMapping(value="/innerChartOutForFinal")  
10.     public ModelAndView  innerChartOut(HttpServletRequest request) throws UnknownHostException, ParseException{  
11.         String timeStartemp = request.getParameter("timeStart")==null?"":request.getParameter("timeStart").toString();  
12.         String timeEndTemp = request.getParameter("timeEnd")==null?"":request.getParameter("timeEnd").toString();  
13.           
14.         String timeStart = getNextDate(timeStartemp, 0, Calendar.DATE, "yyyy-MM-dd");//获取当天  
15.         String timeEnd = getNextDate(timeEndTemp, 1, Calendar.DATE, "yyyy-MM-dd");//获取后一天  
16.           
17.         KeyRequestDao kqDao = new KeyRequestDao();  
18.         List<KeyRequest> list = kqDao.findByTimeForFinalCommon(timeStart, timeEnd);  
19.           
20.         SimpleDateFormat s1 = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");   
21.         SimpleDateFormat s2 = new SimpleDateFormat("yyyy-MM-dd");  
22.         Date tempDate =null;  
23.         String str = null;  
24.           
25.         //yyyy-MM-dd HH mm ss转换为yyyy-MM-dd  
26.         for (KeyRequest keyRequest : list) {  
27.             tempDate = s1.parse(keyRequest.getKqTimerStart());//将时间转换为Date类型  
28.             str = s2.format(s2.parse(s1.format(tempDate)));  
29.             keyRequest.setKqTimerStart(str);  
30.         }  
31.           
32.         //横坐标：时间  
33.         StringBuffer stringBufferX = new StringBuffer();  
34.         //纵坐标：财务应收金额和实际到账金额  
35.         StringBuffer stringBufferY1 = new StringBuffer();  
36.         StringBuffer stringBufferY2 = new StringBuffer();  
37.           
38.         String tempTime = list.get(0).getKqTimerStart();  
39.         int tempKqAutoSum = 0;  
40.         int tempKqAccountSum = 0;  
41.           
42.         for (int i=0;i<list.size();i++) {  
43.             KeyRequest keyRequest = list.get(i);  
44.             if (keyRequest.getKqTimerStart().equals(tempTime)) {  
45.                 //应到账  
46.                 tempKqAutoSum = tempKqAutoSum + Integer.parseInt(keyRequest.getKqAutoSum());  
47.                 //实际到账  
48.                 tempKqAccountSum = tempKqAccountSum + Integer.parseInt(keyRequest.getKqAccountSum()==""?"0":keyRequest.getKqAccountSum());  
49.                 if (i==list.size()-1) {  
50.                     stringBufferX.append("'"+tempTime+"'"); //必须拼凑成这种形式，在前台的JS中才能显示，这种形式的数据为'2014-08-12'  
51.                     stringBufferX.append(",");  
52.                       
53.                     stringBufferY1.append(String.valueOf(tempKqAutoSum));  
54.                     stringBufferY1.append(",");  
55.                       
56.                     stringBufferY2.append(String.valueOf(tempKqAccountSum));  
57.                     stringBufferY2.append(",");  
58.                 }  
59.                   
60.             }else {  
61.                 stringBufferX.append("'"+tempTime+"'");  
62.                 stringBufferX.append(",");  
63.                   
64.                 stringBufferY1.append(String.valueOf(tempKqAutoSum));  
65.                 stringBufferY1.append(",");  
66.                   
67.                 stringBufferY2.append(String.valueOf(tempKqAccountSum));  
68.                 stringBufferY2.append(",");  
69.                   
70.                 tempTime = keyRequest.getKqTimerStart();  
71.                 tempKqAutoSum = 0;  
72.                 tempKqAccountSum = 0;  
73.                 i--;  
74.             }  
75.         }  
76.           
77.         String strx = stringBufferX.toString();  
78.         String strY1 = stringBufferY1.toString();  
79.         String strY2 = stringBufferY2.toString();  
80.           
81.         System.out.println(strx);  
82.         System.out.println(strY1);  
83.         System.out.println(strY2);  
84.           
85.         request.setAttribute("strx", strx);  
86.         request.setAttribute("strY1", strY1);  
87.         request.setAttribute("strY2", strY2);  
88.         ModelAndView mv = new ModelAndView("/innerChart");  
89.         return mv;  
90.           
91.         /* 
92.         KeyRequestDao kqDao = new KeyRequestDao(); 
93.         List<DBObject> list = kqDao.findByTimeForFinal(timeStart,timeEnd); 
94.          
95.         //横坐标：时间 
96.         StringBuffer stringBufferX = new StringBuffer(); 
97.         //纵坐标：财务应收金额和实际到账金额 
98.         StringBuffer stringBufferY1 = new StringBuffer(); 
99.         StringBuffer stringBufferY2 = new StringBuffer(); 
100.          
101.         for(DBObject dbObject : list){ 
102.             stringBufferX.append(dbObject.get("kq_timer_start")); 
103.             stringBufferX.append(","); 
104.              
105.             stringBufferY1.append(dbObject.get("kq_autosum")); 
106.             stringBufferY2.append(dbObject.get("kq_accountsum")); 
107.         } 
108.          
109.         String strY1[] = stringBufferY1.toString().split("_"); 
110.         String strY2[] = stringBufferY2.toString().split("_"); 
111.          
112.         System.out.println(stringBufferX); 
113.         System.out.println(strY1); 
114.         System.out.println(strY2); 
115.         */  
116.           
117.           
118.           
119.     }  
120.   
121.   
122. /** 
123.      * 此函数实现：给定日期和经过天数，算出结果日期 
124.         其中sDate为指定日期，iDate为多少时间段（可以是 年、月、日...  具体根据iCal来确定） 
125.         iCal为某种时间段例如  月：Calendar.MONTH（具体可查询api中Calendar类） 
126.         sStr为日期格式 例如："yyyyMMdd"（具体可查询api中Calendar类） 
127.      * @param sDate 
128.      * @param iDate 
129.      * @param iCal 
130.      * @param sStr 
131.      * @return 
132.      */  
133.     public String getNextDate(String sDate, int iDate,int iCal, String sStr){  
134.         String sNextDate = "";  
135.         Calendar calendar = Calendar.getInstance();  
136.         SimpleDateFormat formatter = new SimpleDateFormat(sStr);  
137.         Date date = null;  
138.         try {  
139.             date = formatter.parse(sDate);  
140.         } catch (ParseException e) {  
141.             e.printStackTrace();  
142.         }  
143.         calendar.setTime(date);  
144.         calendar.add(iCal, iDate);  
145.         sNextDate = formatter.format(calendar.getTime());  
146.         return sNextDate ;  
147.     }  

SpringMVC的DAO层：

[java] view plain copy

1. /** 
2.      * 根据时间范围获取全部信息 
3.      * @author liupeng 
4.      * @param timeStart 
5.      * @param timeEnd 
6.      */  
7.     public List<KeyRequest> findByTimeForFinalCommon(String timeStart, String timeEnd) {  
8.         List<KeyRequest> kRList = new ArrayList<KeyRequest>();  
9.         BasicDBObject obj = new BasicDBObject();  
10.         obj.put("kq_timer_start",new BasicDBObject("$gte",timeStart).append("$lt", timeEnd));  
11.         try{  
12.             DBCursor dbCursor = keyRequest.find(obj).sort(new BasicDBObject("kq_timer_start",1));//以时间倒序排序，不排序的话数据会有问题，X坐标会显示相同的时间  
13.             List<DBObject> list = dbCursor.toArray();  
14.             for (DBObject dbObject:list) {  
15.                 KeyRequest tmp = setKeyRequest(dbObject);  
16.                 kRList.add(tmp);  
17.             }  
18.       
19.         }catch (Exception e) {  
20.             e.printStackTrace();  
21.         }  
22.         return kRList;  
23.     }  

SpringMVC的显示层：

[java] view plain copy

1. <%  
2.         String strx = (String)request.getAttribute("strx");  
3.         String strY1 = (String)request.getAttribute("strY1");  
4.         String strY2 = (String)request.getAttribute("strY2");  
5.         //"January","February","March","April","May","June","July"  
6.     %>  
7.       
8.     <script>    
9.     var data = {  
10.             labels : [<%=strx%>],  
11.             datasets : [    
12.                 {    
13.                     //曲线的填充颜色  
14.                     fillColor : "rgba(220,220,220,0.5)",    
15.                     //填充块的边框线的颜色  
16.                     strokeColor : "rgba(220,220,220,1)",   
17.                     //表示数据的圆圈的颜色  
18.                     pointColor : "rgba(220,220,220,1)",    
19.                     //表示数据的圆圈的边的颜色  
20.                     pointStrokeColor : "#fff",    
21.                     data : [<%=strY1%>]  
22.                 },    
23.                 {    
24.                     fillColor : "rgba(151,187,205,0.5)",    
25.                     strokeColor : "rgba(151,187,205,1)",    
26.                     pointColor : "rgba(151,187,205,1)",    
27.                     pointStrokeColor : "#fff",    
28.                     data : [<%=strY2%>]    
29.                 }    
30.             ]    
31.         };    
32.     var options = {  
33.             scaleOverride :false, //是否显示折线图的线条  
34.             scaleShowLabels :true,//是否显示纵轴  
35.             scaleShowGridLines :true,//是否显示坐标轴的标尺  
36.             bezierCurve :true,//是否显示圆滑的效果  
37.             pointDot :true,//是否显示折线图的顶点  
38.             pointDotRadius :3,//折线图定点大小  
39.             pointDotStrokeWidth:1,//折线图定点外围大小  
40.             animation :true,//是否显示动画效果  
41.             animationSteps :60,//图形显示的速度  
42.     };  
43.     
44.         
45.         var ctx = document.getElementById("bar").getContext("2d");    
46.         var myNewChart = new Chart(ctx).Line(data,options);    
47.             
48.     </script>