kimo one

博客园 首页 新随笔 联系 订阅 管理
【javascript】：Highcharts实战

 

 

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                     width: 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 }
View Code

前端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-width: 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>
View Code

后端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;
View Code

后端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 }
View Code

 





posted on 2015-11-08 05:33  kimo one  阅读(210)  评论(0)  编辑  收藏  举报