highcharts在项目中的应用，根据年月日周季显示图形，形象的展示数据。

一。首先当然是引用所需的js。

       1.jquery-1.10.2.min.js

       2.highcharts.js

       3.checkbox.js(下拉菜单显示年月日)

二。jsp页面。

 <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
http://www.w3.org/TR/html4/loose.dtd">


 
 
 
 
 


 
    

     
• 
        
         
         按月统计
         按周统计
         按日统计
         
        
       

    

    

     

    

 

三。后台ajax请求action返回json，数据通过查询数据库获得。

/*
  * 折线图展示
  */
 @Action(value = "xxx")
 public void xxxData() throws Exception{
  String json = null;
       //分时段统计列表
  if(StringHelpers.isNull(countType)){
   countType="MM";
  }
  //获得起始查询时间
  String starDateStr =getDateLimit(countType);
  //获得结果，就将前台传的参数在数据库中查的所要的结果,如获得对象Javabean
  List dataList = xxxService.getDetail(needdata, starDateStr,null,countType);
  //时间段
  ArrayList dList = getDateList(countType);
  //拼装结果
  if(dList!=null){
   for(int j =0;j     Javabean s = dList.get(j);
    for(int i =0;i      Javabean sd = dataList.get(i);
     if(s.getChannelNum().equals(sd.getChannelNum())){
      dList.get(j).setCount(sd.getCount());
     }
    }
   }
   int[] d = new int[dList.size()];
   int i =0 ;
   for(Javabean data:dList){
   d[i]=data.getCount();
    i++;
   }
    json = JSON.toJSONString(d);
  }  
  actionResult4Json(json);
 }
 
 public String getDateLimit(String type){
  String dataStr = null;
  Calendar cal = Calendar.getInstance();
  if("MM".equals(type)){//获取本年第一天 （12个月）
   cal.set(Calendar.DAY_OF_YEAR,1);
  }else if("IW".equals(type)){//获取三个月前第一天 (12周)
   cal.set(Calendar.DAY_OF_WEEK,1);
   cal.add(Calendar.DAY_OF_YEAR, 1);//周一
   cal.add(Calendar.WEEK_OF_YEAR, -11); 
  }else if("DD".equals(type)){//获取两周前的第一天(14天)
   cal.set(Calendar.DAY_OF_WEEK,1);
   if(cal.get(Calendar.DAY_OF_WEEK)==1){
     cal.add(Calendar.WEEK_OF_YEAR, -1);
   }
   cal.add(Calendar.WEEK_OF_YEAR, -1);
   cal.add(Calendar.DAY_OF_YEAR, 1);
  }
   Date date = cal.getTime();
   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
   dataStr = sdf.format(date);
  return dataStr;
 }
 
 public ArrayList getDateList(String countType){
  ArrayList dateList = new ArrayList();
   SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
  Calendar cal = Calendar.getInstance();
  int num = 12;
  int addLv = Calendar.MONTH;
  int addNo = 1;
  if("MM".equals(countType)){//获取本年第一天 （12个月）
   cal.set(Calendar.DAY_OF_YEAR,1);
  }else if("IW".equals(countType)){//获取三个月前第一天 (12周)
   cal.set(Calendar.DAY_OF_WEEK,1);
   cal.add(Calendar.DAY_OF_YEAR, 1);//周一
   cal.add(Calendar.WEEK_OF_YEAR, -11);
   
   addLv = Calendar.DAY_OF_YEAR;
   addNo = 7;
  }else if("DD".equals(countType)){//获取两周前的第一天(14天)
   cal.set(Calendar.DAY_OF_WEEK,1);
   if(cal.get(Calendar.DAY_OF_WEEK)==1){
     cal.add(Calendar.WEEK_OF_YEAR, -1);
   }
   cal.add(Calendar.WEEK_OF_YEAR, -1);
   cal.add(Calendar.DAY_OF_YEAR, 1);
   num =14;
   addLv = Calendar.DAY_OF_YEAR;
  }

   Date date = cal.getTime();
   dateList.add(new Javabean(sdf.format(date), 0));
  for(int i =1;i    cal.add(addLv, addNo);
    date = cal.getTime();
    dateList.add(new Javabean(sdf.format(date), 0));
  }
  return dateList;
 }

四。以ssm为例，在后台的sql可以这样写。

public String getDetail(Map map) {
       String starDate = (String) map.get("starDateStr");
       String needdata = (String) map.get("needdata");
       String dateType = "'"+(String) map.get("countType")+"'";
       StringBuffer sb = new StringBuffer("select");
       sb.append(" 字段,......");
       sb.append(" from  表");
       sb.append(" where needdata= #{needdata}");
       if(!StringHelpers.isNull(starDate)){
      sb.append(" and DATE >= to_date(#{starDateStr},'YYYY-MM-DD') ");
     }
     if(!StringHelpers.isNull(endDate)){
      sb.append(" and DATE < to_date(#{endDate},'YYYY-MM-DD')+1  ");
     }
       sb.append(" group by trunc(DATE, "+dateType+") ");
       return sb.toString();
      }

五。附件，包含一些常用的highcharts效果展示。

 http://download.csdn.net/detail/chenwei7878/8813865