PS: Highcharts是一款前端图表设计框架,非常绚。
前端JS:
1 var probabilityStatisticsData; 2 var yearTool; 3 var CoordinateX = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 4 var CoordinateY; 5 //入口 6 function changeDate(param){ 7 if(param == 'next'){ 8 yearTool = yearTool-1; 9 }else{ 10 var now = new Date(); 11 yearTool = now.getFullYear(); 12 } 13 probabilityStatisticsData = "probabilityStatisticsData.jsp?action=yearDateType&year="+yearTool; 14 this.changeRuquest(); 15 } 16 17 //框架主体 18 function changeRuquest(){ 19 $(function () { 20 $.post( probabilityStatisticsData, {},function(data) { 21 //CoordinateY = [{name: '企业', data: [40, 80, 30, 90, 25, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}, {name: '广告', data: [30, 10, 40, 5, 25, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]}, {name: '电话',data: [30, 10, 40, 5, 50, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0] }]; 22 CoordinateY = eval("(" + data + ")"); 23 $('#container').highcharts({ 24 title: { 25 text: 'Monthly Average Temperature', 26 x: -20 //center 27 }, 28 subtitle: { 29 text: yearTool, 30 x: -20 31 }, 32 xAxis: { 33 categories: CoordinateX 34 }, 35 yAxis: { 36 title: { 37 text: 'Number(/次)' 38 }, 39 plotLines: [{ 40 value: 0, 41 1, 42 color: '#808080' 43 }] 44 }, 45 tooltip: { 46 valueSuffix: '°C' 47 }, 48 legend: { 49 layout: 'vertical', 50 align: 'right', 51 verticalAlign: 'middle', 52 borderWidth: 0 53 }, 54 series: CoordinateY 55 }); 56 }); 57 }); 58 }
前端HTML:
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 <!DOCTYPE HTML> 7 <html> 8 <head> 9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 10 <title>demo</title> 11 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 12 <script type="text/javascript" src="probabilityStatistics.js"></script> 13 <script src="js/highcharts.js"></script> 14 <script src="js/modules/exporting.js"></script> 15 <script type="text/javascript"> 16 this.changeDate(); 17 </script> 18 </head> 19 <body> 20 <div id="container" style="min- 310px; height: 500px; margin: 0 auto"></div> 21 <div style="margin:10px 0px 10px 20px;"> 22 <button onclick="changeDate('next')">Next(/年)</button> 23 <button onclick="changeDate()">Back(/年)</button> 24 </div> 25 </body> 26 </html>
后端JSP:
<%@page import="com.jws.common.util.JiveGlobe"%> <%@page import="com.test.CycleFrequencyBean"%> <%@page import="java.util.Map"%> <%@page import="com.test.Statisticalprobability"%> <%@page import="com.test.StatisticalprobabilityData"%> <%@page import="java.io.PrintWriter"%> <%@page import="java.util.ArrayList"%> <%@page import="java.util.List"%> <% String action = (null==request.getParameter("action")?"":request.getParameter("action")); if("yearDateType".equalsIgnoreCase(action)){ String year = (null==request.getParameter("year")?"":request.getParameter("year")); Map<String,CycleFrequencyBean> syData = StatisticalprobabilityData.getInstance().getYearCycleMap(year); StringBuffer str = new StringBuffer("["); if(!JiveGlobe.isEmpty(syData)){ for (String key: syData.keySet()){ String yue1 = (null==syData.get(key).getJan()?"0":syData.get(key).getJan()); String yue2 = (null==syData.get(key).getFeb()?"0":syData.get(key).getFeb()); String yue3= (null==syData.get(key).getMar()?"0":syData.get(key).getMar()); String yue4= (null==syData.get(key).getApr()?"0":syData.get(key).getApr()); String yue5 = (null==syData.get(key).getMay()?"0":syData.get(key).getMay()); String yue6 = (null==syData.get(key).getJun()?"0":syData.get(key).getJun()); String yue7 = (null==syData.get(key).getJul()?"0":syData.get(key).getJul()); String yue8 = (null==syData.get(key).getAug()?"0":syData.get(key).getAug()); String yue9= (null==syData.get(key).getSep()?"0":syData.get(key).getSep()); String yue10 =(null==syData.get(key).getOct()?"0":syData.get(key).getOct()); String yue11 = (null==syData.get(key).getNov()?"0":syData.get(key).getNov()); String yue12 = (null==syData.get(key).getDec()?"0":syData.get(key).getDec()); List data = new ArrayList(); data.add(yue1); data.add(yue2); data.add(yue3); data.add(yue4); data.add(yue5); data.add(yue6); data.add(yue7); data.add(yue8); data.add(yue9); data.add(yue10); data.add(yue11); data.add(yue12); str.append("{"name":""+key+""").append(",").append(""data":").append(data).append("},"); } str.append("]"); }else{ str.append("{"name":"Data is null"").append(",").append(""data":").append("[0,0,0,0,0,0,0,0,0,0,0,0]").append("}]"); } out.clear(); out.print(str.toString()); } %>package com.test; import java.text.DateFormat; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.HashMap; import java.util.Iterator; import java.util.List; import java.util.Map; import javax.annotation.Resource; import org.springframework.stereotype.Service; import com.jws.app.operater.data.UserMapper; import com.jws.common.util.JiveGlobe;
后端java:
1 /** 2 * @author lx 组装数据 3 */ 4 @Service(value = "statisticalprobabilitydata") 5 public class StatisticalprobabilityData { 6 private StatisticalprobabilityData() { 7 } 8 9 private static class JiveGlobeHolder { 10 private static StatisticalprobabilityData instance = new StatisticalprobabilityData(); 11 } 12 13 public static StatisticalprobabilityData getInstance() { 14 return JiveGlobeHolder.instance; 15 } 16 /** 17 * 拉取数据库数据自行替换 18 */ 19 @Resource 20 private UserMapper usermapper; 21 22 23 /** 24 * 组装周期(年)数据 25 */ 26 27 public Map<String, CycleFrequencyBean> getYearCycleMap(String year) { 28 29 30 Map<String, CycleFrequencyBean> cycleBeanMap = new HashMap<>(); 31 DateFormat format = new SimpleDateFormat("yyyy"); 32 DateFormat format2 = new SimpleDateFormat("MM"); 33 try { 34 //数据源 35 List<Statisticalprobability> sldata = this.usermapper.getCount(); 36 if (!JiveGlobe.isEmpty(sldata)) { 37 //数据组装 38 for (Iterator<Statisticalprobability> iter = sldata.iterator(); iter.hasNext();) { 39 Statisticalprobability st = iter.next(); 40 Long createtime = Long.parseLong(st.getCreatetime()); 41 String stattype = st.getStattype(); 42 if (!JiveGlobe.isEmpty(createtime)&& !JiveGlobe.isEmpty(stattype)&& year.equals(format.format(createtime))) { 43 int yueType = Integer.valueOf(format2.format(createtime)); 44 CycleFrequencyBean cb = new CycleFrequencyBean(); 45 switch (yueType) { 46 case 1: 47 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 48 cb.setJan("1"); 49 cycleBeanMap.put(stattype, cb); 50 } else { 51 // 获取到当前对象,替换次数 52 cb = cycleBeanMap.get(stattype); 53 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getJan())) { 54 cb.setJan("1"); 55 cycleBeanMap.put(stattype, cb); 56 } else { 57 cb.setJan(Integer.valueOf(cb.getJan()) + 1+ ""); 58 cycleBeanMap.put(stattype, cb); 59 } 60 } 61 break; 62 case 2: 63 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 64 cb.setFeb("1"); 65 cycleBeanMap.put(stattype, cb); 66 } else { 67 cb = cycleBeanMap.get(stattype); 68 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getFeb())) { 69 cb.setFeb("1"); 70 cycleBeanMap.put(stattype, cb); 71 } else { 72 cb.setFeb(Integer.valueOf(cb.getFeb()) + 1+ ""); 73 cycleBeanMap.put(stattype, cb); 74 } 75 } 76 break; 77 case 3: 78 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 79 cb.setMar("1"); 80 cycleBeanMap.put(stattype, cb); 81 } else { 82 cb = cycleBeanMap.get(stattype); 83 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getMar())) { 84 cb.setMar("1"); 85 cycleBeanMap.put(stattype, cb); 86 } else { 87 cb.setMar(Integer.valueOf(cb.getMar()) + 1+ ""); 88 cycleBeanMap.put(stattype, cb); 89 } 90 } 91 break; 92 case 4: 93 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 94 cb.setApr("1"); 95 cycleBeanMap.put(stattype, cb); 96 } else { 97 cb = cycleBeanMap.get(stattype); 98 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getApr())) { 99 cb.setApr("1"); 100 cycleBeanMap.put(stattype, cb); 101 } else { 102 cb.setApr(Integer.valueOf(cb.getApr()) + 1+ ""); 103 cycleBeanMap.put(stattype, cb); 104 } 105 } 106 break; 107 case 5: 108 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 109 cb.setMay("1"); 110 cycleBeanMap.put(stattype, cb); 111 } else { 112 // 获取到当前对象,替换次数 113 cb = cycleBeanMap.get(stattype); 114 if (JiveGlobe.isEmpty(cycleBeanMap 115 .get(stattype).getMay())) { 116 cb.setMay("1"); 117 cycleBeanMap.put(stattype, cb); 118 } else { 119 cb.setMay(Integer.valueOf(cb.getMay()) + 1 120 + ""); 121 cycleBeanMap.put(stattype, cb); 122 } 123 } 124 break; 125 case 6: 126 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 127 cb.setJun("1"); 128 cycleBeanMap.put(stattype, cb); 129 } else { 130 cb = cycleBeanMap.get(stattype); 131 if (JiveGlobe.isEmpty(cycleBeanMap 132 .get(stattype).getJun())) { 133 cb.setJun("1"); 134 cycleBeanMap.put(stattype, cb); 135 } else { 136 cb.setJun(Integer.valueOf(cb.getJun()) + 1 137 + ""); 138 cycleBeanMap.put(stattype, cb); 139 } 140 } 141 break; 142 case 7: 143 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 144 cb.setJul("1"); 145 cycleBeanMap.put(stattype, cb); 146 } else { 147 cb = cycleBeanMap.get(stattype); 148 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getJul())) { 149 cb.setJul("1"); 150 cycleBeanMap.put(stattype, cb); 151 } else { 152 cb.setJul(Integer.valueOf(cb.getJul()) + 1+ ""); 153 cycleBeanMap.put(stattype, cb); 154 } 155 } 156 break; 157 case 8: 158 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 159 cb.setAug("1"); 160 cycleBeanMap.put(stattype, cb); 161 } else { 162 cb = cycleBeanMap.get(stattype); 163 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getAug())) { 164 cb.setAug("1"); 165 cycleBeanMap.put(stattype, cb); 166 } else { 167 cb.setAug(Integer.valueOf(cb.getAug()) + 1+ ""); 168 cycleBeanMap.put(stattype, cb); 169 } 170 } 171 break; 172 case 9: 173 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 174 cb.setSep("1"); 175 cycleBeanMap.put(stattype, cb); 176 } else { 177 cb = cycleBeanMap.get(stattype); 178 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getSep())) { 179 cb.setSep("1"); 180 cycleBeanMap.put(stattype, cb); 181 } else { 182 cb.setSep(Integer.valueOf(cb.getSep()) + 1+ ""); 183 cycleBeanMap.put(stattype, cb); 184 } 185 } 186 break; 187 case 10: 188 189 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 190 cb.setOct("1"); 191 cycleBeanMap.put(stattype, cb); 192 } else { 193 cb = cycleBeanMap.get(stattype); 194 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getOct())) { 195 cb.setOct("1"); 196 cycleBeanMap.put(stattype, cb); 197 } else { 198 cb.setOct(Integer.valueOf(cb.getOct()) + 1+ ""); 199 cycleBeanMap.put(stattype, cb); 200 } 201 } 202 break; 203 case 11: 204 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 205 cb.setNov("1"); 206 cycleBeanMap.put(stattype, cb); 207 } else { 208 cb = cycleBeanMap.get(stattype); 209 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getNov())) { 210 cb.setNov("1"); 211 cycleBeanMap.put(stattype, cb); 212 } else { 213 cb.setNov(Integer.valueOf(cb.getNov()) + 1+ ""); 214 cycleBeanMap.put(stattype, cb); 215 } 216 } 217 break; 218 case 12: 219 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) { 220 cb.setDec("1"); 221 cycleBeanMap.put(stattype, cb); 222 } else { 223 cb = cycleBeanMap.get(stattype); 224 if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getDec())) { 225 cb.setDec("1"); 226 cycleBeanMap.put(stattype, cb); 227 } else { 228 cb.setDec(Integer.valueOf(cb.getDec()) + 1+ ""); 229 cycleBeanMap.put(stattype, cb); 230 } 231 } 232 break; 233 } 234 } 235 } 236 } 237 } catch (Exception e) { 238 System.out.println(e); 239 } 240 return cycleBeanMap; 241 } 242 243 244 }