chart.js操作執行個體（前後台互連）

標籤：chart.js

前提：需要匯入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-ddfor (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>