highecharts折线统计图

html部分

<script type="text/javascript" src="${ctx}/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts/highcharts-3d.js"></script>
<script type="text/javascript" src="${ctx}/js/highcharts/highcharts-more.js"></script>


<div style="height: 100%;">
    <%--<div class="f_img"><span>实时采集数据分析</span></div>--%>
    <!-- 图表开始-->
    <div id="gdTabs" style="height: 85%">
        <div id="costChart" style="width: 100%; height: 100%"></div>
    </div>
</div>

js部分

$.ajax({
                type: "get",
                url:Config.ContextPath+'service/njgs/ssjc/realdatagather/getEchartsData',
                dataType: "json",
                success: function(result) {
                    costEcharts(result);
                    console.log(result)
                }
            });
function costEcharts(result) {

                var xydata = [];
                var xdata = [];//x轴
                $.each(result.data.yData,function(key,values){
                    xydata.push({name:key,data:values});
                });

                $.each(result.data.cData,function(key,values){
                    xdata.push(values);
                });

                var chart = Highcharts.chart('costChart', {
                    chart: {
                        marginTop: 40,
                        marginRight: 40
                    },
                    title: {
                        text: null
                    },
                    xAxis: {
                        categories: xdata,
                        axisLabel:{interval: 10}
                    },
                    yAxis: {
                        title: {
                            text: '实时采集数据分析'
                        }
                    },
                    series: xydata
                });
            }

查询数据-dao

        //获取数据
        public List getYData(Map<String,Object> searchColumn){
        //根据条件判断搜索类型
            int type=0;
            if("0".equals(searchColumn.get("gatherType"))){//按小时
                type=0;
            }else if("1".equals(searchColumn.get("gatherType"))){//按天
                type=1;
            }else if("2".equals(searchColumn.get("gatherType"))){//按月
                type=2;
            }else if("3".equals(searchColumn.get("gatherType"))){//按年
                type=3;
            }
            String indexId=searchColumn.get("indexId").toString();
            String strt=searchColumn.get("gatherDateStart").toString();
            String end=searchColumn.get("gatherDateEnd").toString();
            String strtm=searchColumn.get("gatherDateStart").toString().substring(0,7);
            String endm=searchColumn.get("gatherDateEnd").toString().substring(0,7);
            /** 先查询横坐标的值*/
            StringBuffer ssql=new StringBuffer();
            ssql.append(" SELECT DISTINCT tm.NAME,tm.ROW_ID from T_REALDATA_GATHER tr " +
                    "  LEFT JOIN T_MONITORING_POINT tm ON tr.MONITORINGPOINT_ID=tm.ROW_ID " +
                    "  LEFT JOIN T_INDEX ti on tr.INDEX_ID=ti.ROWID " +
                    "where 1=1 ");
            if(searchColumn.containsKey("indexId")){
                ssql.append(" and tr.INDEX_ID='"+searchColumn.get("indexId").toString()+"' ");//--and MONITORINGPOINT_ID='739'
            }
            if(searchColumn.containsKey("gatherDateStart")){
                ssql.append(" and to_char(tr.GATHER_TIME,'yyyy-mm-dd')>='"+searchColumn.get("gatherDateStart").toString()+"' and to_char(tr.GATHER_TIME,'yyyy-mm-dd')<='"+searchColumn.get("gatherDateEnd").toString()+"' ");
            }
            ssql.append(" ORDER BY to_number(tm.ROW_ID) ");
            JSONArray arry=DatabaseOptUtils.listObjectsBySqlAsJson(this,ssql.toString());

            List<Object[]> list =new LinkedList<Object[]>();
            //遍历每一条折线数据，添加到最终集合list 中
            if(arry.size()>0){
                for (int i = 0; i < arry.size(); i++) {
                    JSONObject jsonObject=arry.getJSONObject(i);
                    String code=jsonObject.get("rowId").toString();
                    String name=jsonObject.get("name").toString();
                    List<Object[]> l =getUnionAllSql(type,strt,end,strtm,endm,indexId,code);
                    for (int j = 0; j < l.size(); j++) {
                        Object[] o=l.get(j);
                        o[1]=code;
                        o[2]=name;
                        list.add(o);
                    }
                }
            }
            List list1=new ArrayList();
            Map<String, Double[]> map = new LinkedHashMap<String, Double[]>();

            String[] xLine={};//监测点数组
            String[] c={};//横坐标数组
            int num=24;
            int time=compareDate(strt,end,0);
            int size=0;//设置折线数据的----集合初始值大小
            if (type==0){//按小时搜索
                size=num*(time+1);//计算集合大小
            }
            if(type==1){//天
                size=(compareDate(strt,end,0)+1);
            }
            if(type==2){//月
                size=(compareDate(strt,end,1)+1);
            }
            if(type==3){//年
                size=(compareDate(strt,end,2)+1);
            }
            if(null != list && list.size() > 0) {
                int n=0;//纵坐标ntu值数组下标
                for(int i = 0; i < list.size(); i++) {
                    Object[] object = list.get(i);
                    if(map.containsKey(object[2].toString())) {//判断map数组中是否包含这个key（一条折线对应一个key）
                        Double[] cost = map.get(object[2].toString());
                        if(n<size){
                            cost[n] = Double.valueOf(object[3].toString());
                            if(c.length<size){
                                if(!Arrays.asList(c).contains(object[0].toString())){//判断数组c的元素不重复添加
                                    c = insert(c, object[0].toString());//将字符串元素，添加到c数组中
                                    xLine= insert(xLine, object[2].toString());
                                }else{
                                    c = insert(c, "");
                                    xLine= insert(xLine, "");
                                }
                            }
                        }

                        n++;
                    } else {
                        Double[] cost = new Double[size];
                        n=0;
                        cost[0] = Double.valueOf(object[3].toString());//将获取的值放入Double类型数组
                        map.put(object[2].toString(), cost);//将Double类型数组放入map中
                        if(c.length<size){
                            if(!Arrays.asList(c).contains(object[0].toString())){//判断C集合中是否包含这个key,不包含则赋值为空
                                c = insert(c, object[0].toString());
                                xLine= insert(xLine, object[2].toString());
                            }else{
                                c = insert(c, "");
                                xLine= insert(xLine, "");
                            }
                        }
                        n++;
                    }
                }
            }
            list1.add(map);//折线数据的数组map集合
            list1.add(xLine);//折线的名称--折线显示可不用
            list1.add(c);//横坐标数组
            return list1;
        }
        public  List<Object[]> getUnionAllSql(int type,String start,String end,String strtm,String endm,String indexId,String code){
            StringBuffer sql=new StringBuffer();
          //拼接sql
			--------------------------
            List<Object[]> list = (List<Object[]>)DatabaseOptUtils.listObjectsBySql(this,sql.toString());
            return list;
        }
 private  String[] insert(String[] arr, String str)
        {
            int size = arr.length;
            String[] tmp = new String[size + 1];
            System.arraycopy(arr, 0, tmp, 0, size);
            tmp[size] = str;
            return tmp;
        }
        /**
         * @param date1 需要比较的时间 不能为空(null),需要正确的日期格式
         * @param date2 被比较的时间  为空(null)则为当前时间
         * @param stype 返回值类型   0为多少天，1为多少个月，2为多少年
         * @return
         */
        public static int compareDate(String date1,String date2,int stype){
            int n = 0;

            String[] u = {"天","月","年"};
            String formatStyle = stype==1?"yyyy-MM":"yyyy-MM-dd";

            date2 = date2==null?getCurrentDate():date2;

            DateFormat df = new SimpleDateFormat(formatStyle);
            Calendar c1 = Calendar.getInstance();
            Calendar c2 = Calendar.getInstance();
            try {
                c1.setTime(df.parse(date1));
                c2.setTime(df.parse(date2));
            } catch (Exception e3) {
                System.out.println("wrong occured");
            }
            //List list = new ArrayList();
            while (!c1.after(c2)) {                     // 循环对比，直到相等，n 就是所要的结果
                //list.add(df.format(c1.getTime()));    // 这里可以把间隔的日期存到数组中 打印出来
                n++;
                if(stype==1){
                    c1.add(Calendar.MONTH, 1);          // 比较月份，月份+1
                }
                else{
                    c1.add(Calendar.DATE, 1);           // 比较天数，日期+1
                }
            }

            n = n-1;

            if(stype==2){
                n = (int)n/365;
            }
            return n;
        }

        /**
         * 得到当前日期
         * @return
         */
        public static String getCurrentDate() {
            Calendar c = Calendar.getInstance();
            Date date = c.getTime();
            SimpleDateFormat simple = new SimpleDateFormat("yyyy-MM-dd");
            return simple.format(date);

        }

数据查询-controller

/**
     * 查询  实时监测信息表echarts数据
     */
    @RequestMapping(value = "/getEchartsData", method = {RequestMethod.GET})
    public void getEchartsData(String[] field, PageDesc pageDesc, HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> searchColumn = collectRequestParameters(request);
        searchColumn.put("deletedFlag", CommonsUtil.DELETEDFLAG_NO);
        List list = realdataGatherDao.getYData(searchColumn);

        ResponseMapData resData = new ResponseMapData();
        resData.addResponseData("yData", list.get(0));
        resData.addResponseData("xData", list.get(1));
        resData.addResponseData("cData", list.get(2));

        JsonResultUtils.writeResponseDataAsJson(resData, response);
    }

效果