利用Map做HighChart统计图数据源确定方案

最近在使用highChart做数据统计图时,忽然想到,在作图时,需要同时将X轴和Y轴的数据源同时传至页面,并且还得一一对应。于是,开始思索该用什么方案来解决此问题。

利用Map做HighChart统计图数据源确定方案_第1张图片

上图就是我想要达到的效果。每次要根据我选择的月份来自动生成当月每一天所对应收单数的统计图。这就要求,我必须将每日的收单数一一
对应的传至页面。
一想到一一对应,很自然会想到Map的键值对形式。可是Map键值对的形式传至前台应该如何处理呢?这就用到了在JS中去遍历Map了。

JS回调函数中遍历Map

当然这里传回来的map是json形式的。由于HighChart的数据源是数组的形式,所以,我会将遍历的Map的key和value按顺序分别放在一个
数组中进行保存。
    var arrayX=new Array();
    var arrayY=new Array();
    var random = Math.random();//随机数 
    $.ajax({
        type:"get",
        datatype:"json",
        url:basePath+"TVShowAction/aquiringBill.do?random="+random,
        async:false,
        data:{"year":year,"month":month},
        success:function(data){
            var obj=eval("("+data+")");//转成对象形式
            var i=0;  //map遍历形式
            $.each(obj,function(key,value){ //jquery遍历键值对 
                arrayX[i]=key;
                arrayY[i]=value;
                i++;
            });             
        }
    })
经过上述的过程后,图的效果是可以出来的,可惜结果不太尽如人意,我忽然发现,横坐标的日期是混乱的,并没有按照1——30这样的顺序来排序。
于是我想起来了,Map的存储方式是凌乱的,没有顺序的。本来我准备再换另一种方式来解决的List,因为list是顺序的。但是很快又被我否决了。
我想到了LinkedHashMap的形式。这种格式的存储在内存中一链表的形式将Map进行了顺序排列。
于是乎,action中的方法被我改成了下面:

LinkedHashMap实现日期顺序排列

    @RequestMapping(value="aquiringBill.do",method=RequestMethod.GET)
    public void AquiringBill(HttpServletRequest request, HttpServletResponse response) throws IOException, ParseException{

        int  year=Integer.valueOf(request.getParameter("year"));
        int  month=Integer.valueOf(request.getParameter("month"));
        Map map=new LinkedHashMap<String,Integer>();
        SimpleDateFormat sdf=new SimpleDateFormat("yyyy.MM.dd");
        Calendar calendar=Calendar.getInstance();
        calendar.set(year, month-1, 01);
        int days = calendar.getActualMaximum(calendar.DAY_OF_MONTH);//获取当月天数
        for(int i=1;i<=days;i++){
            calendar.set(Calendar.DAY_OF_MONTH, i); //获取当月的第i天
            Date date=calendar.getTime();
            int count= tVShowService.queryBillCount(sdf.format(date));
            map.put(sdf.format(date), count);
        }       response.getWriter().print(JSONObject.fromObject(map).toString());
    }   
在这段代码中还有一个也是值得注意的地方,就是我通过获取了年和月份来遍历当月的每一天,然后根据每一天去查询具体收单数的过程。
这里用到了Calendar这个类。虽然很常用,但是遍历每一个月的天数还是一个不错的方法,也是我自己琢磨出来的。
以上是这次作图过程中遇到的一些问题的解决方案,如果大家还有什么更好的方法,请赐教,共同交流!

你可能感兴趣的:(数据源,highchart,Linkedmap,JS遍历Map)