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-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>