时间作为横轴的图表（morris.js）超越昨天的自己系列（8）

超越昨天的自己系列（8）

morris.js的官网有详细的例子：http://www.oesmith.co.uk/morris.js/

特别注意它的依赖：

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

放个div：

<div class="graph-container">
        20天内用户增长数量
        <div id="examplefirst" class="graph" style="position: relative;">
            <div id="myfirstchart" style="height: 250px;"></div>
        </div>
    </div>

script：

    <script >
    // 后台传来的数据 
    var data = '$data';
    data = data.replace(/&quot;/g, '"');
    var array = eval(data);
    new Morris.Line({
        xLabels: "day",
         // ID of the element in which to draw the chart.
          element: 'myfirstchart',
          // Chart data records -- each entry in this array corresponds to a point on
          // the chart.
          data: array,
          // The name of the data record attribute that contains x-values.
          xkey: 'year',
          // A list of names of data record attributes that contain y-values.
          ykeys: ['value'],
          // Labels for the ykeys -- will be displayed when you hover over the
          // chart.
          labels: ['Value']
    });
    </script>

就可以展示啦~ 只要注意插件中参数data是个数组即可。

后台传来的数据类似：

[
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ]

所以后台的查询我做成了循环查询的方式，本人觉得一定是有更优的方式能够一次查出全部需求数据。先看下实现（hibernate）：

action处理：注意循环部分的查询，每次只查一天内的量，如果数量过多可能会影响数据库性能

        // y轴末尾时间 时间处理成： 20130201 23:59:59:999
        Date endDate = WXDateUtil.getTodayLastTime();
        // y轴开始时间 默认20天前到现在
        Date beginDate = WXDateUtil.getBeforeDays(endDate, 20);
        // y轴上时间点列表
        List<Date> dateList = new ArrayList<Date>();
        // 先放开始时间
        Date midDate = beginDate;
        while(endDate.after(midDate)){
            dateList.add(midDate);
            // 下一天
            midDate = WXDateUtil.getNextDay(midDate);
        }
        // 再放结束时间
        dateList.add(endDate);
        JSONArray array = new JSONArray();
        if(dateList.size() > 0){
            for (int i = 0; i < dateList.size() - 1; i++) {
                long count = clientService.getCountByTypeAndTime(0, dateList.get(i), dateList.get(i+1));
                JSONObject object = new JSONObject();
                object.put("year", WXDateUtil.dateToStr(dateList.get(i+1), "yyyy-MM-dd" ));
                object.put("value", count);
                array.add(object);
            }
        }
        context.put("data", array.toJSONString());

时间处理 Util的包：

public class WXDateUtil {


    private static final String DEFAULT_DATE_FORMAT = "yyyy-MM-dd";

    /**
     * 把日期型转换成字符串形式。
     *
     * @param date 日期
     * @param dateFormat 日期格式，例如"yyyy/MM/dd"、"yyyy年MM月dd"
     * @return 日期字符串
     */
    public static String toLocaleString(Date date, String dateFormat) {
        if (date == null) {
            return "";
        }

        if (StringUtil.isBlank(dateFormat)) {
            return new SimpleDateFormat(DEFAULT_DATE_FORMAT).format(date);
        }

        return new SimpleDateFormat(dateFormat).format(date);
    }

    /**
     * 把日期型转换成"yyyy/MM/dd/"字符串形式。
     *
     * @param date
     * @return 日期字符串
     */
    public static String toLocaleString(Date date) {
        return toLocaleString(date, null);
    }

    /**
     * 获得sysdate+hours后的时间
     *
     * @param hours 提前或者推后的时间
     * @return sysdate+hours后的时间
     */
    public static Date getSysDate(int hours) {
        Calendar time = Calendar.getInstance();

        time.add(Calendar.HOUR, hours);

        return time.getTime();
    }

    /**
     * 方法说明:天数差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalDays(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long daysd = intervals / (24 * 60 * 60 * 1000);

            return new Long(daysd).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:小时差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalHours(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long longHours = (intervals / (60 * 60 * 1000)) % 24;

            return new Long(longHours).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:分钟差
     *
     * @param firstDate
     * @param lastDate
     */
    public static int getTimeIntervalMins(Date firstDate, Date lastDate) {
        long intervals = lastDate.getTime() - firstDate.getTime() + (60 * 1000);

        if (intervals > 0) {
            long longMins = (intervals / (60 * 1000)) % 60;

            return new Long(longMins).intValue();
        }

        return 0;
    }

    /**
     * 方法说明:parse date
     *
     * @param date
     * @param dateformat
     */
    public static Date parseDate(String date, String dateformat) {
        SimpleDateFormat sdf = new SimpleDateFormat(dateformat);

        try {
            return sdf.parse(date);
        } catch (ParseException e) {
            return null;
        }
    }

    /**
     * 比较日期是否大于当前日期
     */
    public static boolean afterNow(Date date) {
        if (date == null) {
            return false;
        }

        Calendar nowCar = Calendar.getInstance();
        Calendar car = Calendar.getInstance();

        car.setTime(date);

        return car.after(nowCar);
    }

    /*
     * 查看是否早几天
     */
    public static boolean afterDays(Date date, int day) {
        if (date == null) {
            return false;
        }

        Calendar levelDay = Calendar.getInstance();
        Calendar createDay = Calendar.getInstance();

        createDay.setTime(date);
        createDay.add(Calendar.DATE, day);

        if (createDay.after(levelDay)) {
            return true;
        } else {
            return false;
        }
    }

    public static String getIconPathDay(){
        GregorianCalendar now;
        String year, day, month, hour;
        now = new GregorianCalendar();
        year = String.valueOf(now.get(Calendar.YEAR));
        month = (now.get(Calendar.MONTH) + 1) < 10 ? "0" + String.valueOf(now.get(Calendar.MONTH) + 1) : String.valueOf(now.get(Calendar.MONTH) + 1);
        day = String.valueOf(now.get(Calendar.DAY_OF_MONTH));
        StringBuilder sb = new StringBuilder();
        sb.append(year).append("/");
        sb.append(month).append("/");
        sb.append(day).append("/");
        return sb.toString();
    }

    /*
     * 查看是否早几小时
     */
    public static boolean afterHours(Date date, int hours) {
        if (date == null) {
            return false;
        }

        Calendar levelDay = Calendar.getInstance();
        Calendar createDay = Calendar.getInstance();

        createDay.setTime(date);
        createDay.add(Calendar.HOUR, hours);

        if (createDay.after(levelDay)) {
            return true;
        } else {
            return false;
        }
    }

    /**
     * 取得系统当前日期
     */
    public static Date getCurrentTime() {
        return new Date();
    }

    /**
     * 返回多少时间的前的时间, seconds 可以是负的
     *
     * @param when
     * @param seconds
     */
    public static Date addTime(Date when, int seconds) {
        Calendar c = Calendar.getInstance();

        c.setTime(when);
        c.add(Calendar.SECOND, seconds);

        return c.getTime();
    }

    /**
     * @param date
     * @param pattern "yyyy-MM-dd HH:mm:ss.SSS"
     * @return
     */
    public static String dateToStr(Date date, String pattern) {
        if (pattern == null) {
            pattern = "yyyy-MM-dd HH:mm:ss.SSS";
        }
        DateFormat ymdhmsFormat = new SimpleDateFormat(pattern);

        return ymdhmsFormat.format(date);
    }

    /**
     * @param str
     * @param pattern "yyyy-MM-dd HH:mm:ss.SSS"
     * @return
     * @throws ParseException
     */
    public static Date strToDate(String str, String pattern) {
        if (pattern == null) {
            pattern = "yyyy-MM-dd HH:mm:ss.SSS";
        }
        DateFormat ymdhmsFormat = new SimpleDateFormat(pattern);
        try {
            return ymdhmsFormat.parse(str);
        } catch (ParseException e) {
            return null;
        }
    }

    /**
     * 获得当天日期
     *
     * @date 2009-2-20
     */
    public static Date getToday() {
        Calendar ca = Calendar.getInstance();
        return ca.getTime();
    }

    /**
     * @date 2009-2-20
     */
    public static Date mkDate(int year, int month, int date) {
        Calendar ca = Calendar.getInstance();
        ca.set(year, month - 1, date);
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        sdf.format(ca.getTime());
        return ca.getTime();
    }

    /**
     * <li></li>
     *
     * @param date1
     * @param date2 <li></li>
     */
    public static boolean compareTwoDate(Date date1, Date date2) {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd HH:mm");
        return simpleDateFormat.format(date1).equals(simpleDateFormat.format(date2));
    }

    /**
     * <li></li>
     *
     * @param date1
     * @param date2 <li></li>
     */
    public static boolean compareTwoDateDay(Date date1, Date date2) {
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMdd");
        return simpleDateFormat.format(date1).equals(simpleDateFormat.format(date2));
    }
    
    /**
     * 通过文件路径获取文件名，类似Linux下basename命令
     * @param path
     * @return
     */
    public static String getFileName(String path){
        String str[] = path.split("/");
        return str[str.length-1];
        
    }
    
    /**
     * 取得今天最后时间的Date
     * @return 23:59:59
     */
    public static Date getTodayLastTime(){
        Calendar cal = Calendar.getInstance(); // represents right now, i.e. today's date
        cal.set(Calendar.HOUR_OF_DAY, 23);
        cal.set(Calendar.MINUTE, 59);
        cal.set(Calendar.SECOND, 59);
        cal.set(Calendar.MILLISECOND, 999); // credit to f1sh
        return cal.getTime();
    }
            
    /**
     * 指定日期向后推几天的日期
     * @param date
     * @param n 天数
     * @return
     */
    public static Date getBeforeDays(Date date, int n){
        Long dateTime = date.getTime() - n*24*60*60*1000;
        return new Date(dateTime);
    }
    
    /**
     * 指定日期向后推1天的日期
     * @param date
     * @return
     */
    public static Date getNextDay(Date date){
        Long dateTime = date.getTime() + 24*60*60*1000;
        return new Date(dateTime);
    }
    
    /**
     * 
     * @param args
     */
    public static void main(String[] args) {
        System.out.println(getToday());
        
    }
}

然后了解下hibernate查询count的方式：

参考了：http://stackoverflow.com/questions/1372317/how-do-we-count-rows-using-hibernate

例子：

    public long getCountByTypeAndTime(int type, Date beginTime, Date endTime) {

        Criteria criterion = this.getSession().createCriteria(ClientDO.class);
        if(type!= 0){
            criterion.add(Restrictions.eq("type", type));
        }
        if (beginTime != null) {
            criterion.add(Restrictions.ge("createTime", beginTime));
        }
        if (endTime != null) {
            criterion.add(Restrictions.le("createTime", endTime));
        }
        
        return (Long)criterion.setProjection(Projections.rowCount()).uniqueResult();
        
    }