开始在用hightchart做柱状图的时候，一直想不通后台查出来的数据转成json怎么传到前台，显示出来的。知道自己真正接触到才发现其实它很简单！Heightchart里面的series[]以数组的形式放进去就OK了，那么我们要怎么实现这个过程呢？
我们有好几种方法可以实现：
- 对于简单的柱状图展示，比如只需要从后台查出某个产品的销量，我们可以直接在后台查出数据后转成json返回到前台，用遍历的方式把它放在数组中，再把数组装到series[]当中就ok了。但是取指定数据的时候需要先用eval转换为对象。
- 但是当我们要在前台展示指定的值得时候，就不能这样随便了，需要先把返回来的json转成对象在通过对象取里面的你所需要的值，通过遍历的方式放到数组里面扔到series[]当中 就好。
案例：
当然我们也可以把查到值放在map集合中直接返回 在通过遍历集合的方式取到指定的值放到数组扔到
series[]当中。
案例：前台页面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
function pitchReport() { $.ajax({ type : "post", dataType : "json", url : "monthReportController.do?pitchReportData", data : { pitchReportListTbDeptId : $('input[name="pitchReportListTbDeptId"]').val(), pitchyears : $('input[name="pitchyears"]').val(), }, success : function(data) { var sysj = new Array(); // 时间 var pan = new Array(); // 总数 var over = new Array(); // 超标数 var primary = new Array(); //初级 var middle = new Array(); //中级 var hight = new Array(); //高级 var overrate = new Array(); //超标率 var j = 0; for (var i = 0; i < data.length; i++) { sysj[i] = data[i].departname+","+data[i].year+"-"+data[i].month; pan[i]= parseFloat(data[i].count1); over[i]=parseFloat(data[i].count2); primary[i]=parseFloat(data[i].one); middle[i]=parseFloat(data[i].two); hight[i]=parseFloat(data[i].three); if(parseFloat(data[i].count1)>0){ overrate[i]=parseFloat((parseFloat(data[i].count2)/parseFloat(data[i].count1)*100).toFixed(2)); }else{ overrate[i] = 0; } /* if(i%4==0){ sysj[j] = data[i].td+","+data[i].month; pan[j]= parseFloat(data[i].count); over[j]=parseFloat(data[i].countover); primary[j]=parseFloat(data[i].primary); middle[j]=parseFloat(data[i].middle); hight[j]=parseFloat(data[i].high); overrate[j]=parseFloat(data[i].overrate.replace("%","")); j++; } */ } $('#pitch_report_charts').highcharts({ chart : { zoomType : 'xy', borderColor: '#7B7B7B', borderWidth: 2, plotBackgroundColor:"#FCFCFC",//主图表区背景颜色 plotBorderColor:'black',//主图表边框颜色 marginBottom: 100, plotBorderWidth:2,//主图表边框宽度 backgroundColor: { linearGradient: [0, 500, 0, 0], stops: [ [0, '#FFF7FB'], [1, '#FFD9EC'] ] }, }, credits : { enabled : false // 禁用版权信息 }, title : { text : '沥青拌合站月检' }, xAxis : [ { categories : sysj, crosshair : true } ], yAxis : [ { // Primary yAxis labels : { format : '{value}%', style : { color : "#EA1B26" } }, title : { text : '超标率', style : { color : "#EA1B26" } } }, { // Secondary yAxis title : { text : '总盘数', style : { color : Highcharts.getOptions().colors[0] } }, labels : { format : '{value} 盘', style : { color : Highcharts.getOptions().colors[0] } }, opposite : true }, { // Secondary yAxis title : { text : '初级', style : { color : "#84D14A" } }, labels : { format : '{value} 盘', style : { color : "#84D14A" } }, opposite : true }, { // Secondary yAxis title : { text : '中级', style : { color : "#E9C341" } }, labels : { format : '{value} 盘', style : { color : "#E9C341" } }, opposite : true }, { // Secondary yAxis title : { text : '高级', style : { color : "#EA1B26" } }, labels : { format : '{value} 盘', style : { color : "#EA1B26" } }, opposite : true } ], tooltip : { shared : true }, series : [ { name : '总数', type : 'column', yAxis : 1, data : pan, tooltip : { valueSuffix : '盘' } }, { name : '初级', type : 'column', yAxis : 1, color : "#84D14A", data : primary, tooltip : { valueSuffix : '盘' } }, { name : '中级', type : 'column', color : "#E9C341", yAxis : 1, data : middle, tooltip : { valueSuffix : '盘' } }, { name : '高级', type : 'column', yAxis : 1, color : "#EA1B26", data : hight, tooltip : { valueSuffix : '盘' } }, { name : '超标率', type : 'spline', color : "#FC0324", data : overrate, tooltip : { valueSuffix : '%' } } ] }); } }); } |
controller层：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@RequestMapping(params = "pitchReportData") @ResponseBody public List<Map<String, Object>> pitchReportData(HttpServletRequest request, HttpServletResponse response, DataGrid dataGrid) { String id = request.getParameter( "pitchReportListTbDeptId" ); String year = request.getParameter( "pitchyears" ); HttpSession session = ContextHolderUtils.getSession(); if(id==null||"".equals( id )){ id = oConvertUtils.getString( session.getAttribute( Globals.SELECT_DEPT_ID ) ); } session.setAttribute( Globals.SELECT_DEPT_ID,id ); int proId = 0; int tdId = 0; int waId = 0; if(id!=null&&!"".equals( id )){ String deptLevel = departService.getDeptLevel( id ); if("0" .equals(deptLevel)){ proId = oConvertUtils.getInt( id ); }else if("1".equals( deptLevel )){ tdId = oConvertUtils.getInt( id ); }else{ waId = oConvertUtils.getInt( id ); } } List<Map<String, Object>> resultList = monthReportService.getLqByYear(proId, tdId, waId, year); return resultList; } |