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

最新推荐文章于 2024-06-30 19:50:59 发布

Mr_LiuP

最新推荐文章于 2024-06-30 19:50:59 发布

阅读量9.8k

点赞数 3

分类专栏： Chart.js 文章标签： Chart.js

本文链接：https://blog.csdn.net/liupeng_family/article/details/38518333

版权

Chart.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前提：需要导入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>