【javascript】：Highcharts实战
2024-04-10 10:48:14
PS: Highcharts是一款前端图表设计框架，非常绚。
前端JS：
var probabilityStatisticsData;
var yearTool;
var CoordinateX = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var CoordinateY;
//入口
function changeDate(param){
if(param == 'next'){
yearTool = yearTool-1;
}else{
var now = new Date();
yearTool = now.getFullYear();
}
probabilityStatisticsData = "probabilityStatisticsData.jsp?action=yearDateType&year="+yearTool;
this.changeRuquest();
} //框架主体
function changeRuquest(){
$(function () {
$.post( probabilityStatisticsData, {},function(data) {
//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] }];
CoordinateY = eval("(" + data + ")");
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: yearTool,
x: -20
},
xAxis: {
categories: CoordinateX
},
yAxis: {
title: {
text: 'Number(/次)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: CoordinateY
});
});
});
}
前端HTML：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>demo</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="probabilityStatistics.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
<script type="text/javascript">
this.changeDate();
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div>
<div style="margin:10px 0px 10px 20px;">
<button onclick="changeDate('next')">Next(/年)</button>
<button onclick="changeDate()">Back(/年)</button>
</div>
</body>
</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：
/**
* @author lx 组装数据
*/
@Service(value = "statisticalprobabilitydata")
public class StatisticalprobabilityData {
private StatisticalprobabilityData() {
} private static class JiveGlobeHolder {
private static StatisticalprobabilityData instance = new StatisticalprobabilityData();
} public static StatisticalprobabilityData getInstance() {
return JiveGlobeHolder.instance;
}
/**
* 拉取数据库数据自行替换
*/
@Resource
private UserMapper usermapper; /**
* 组装周期(年)数据
*/ public Map<String, CycleFrequencyBean> getYearCycleMap(String year) { Map<String, CycleFrequencyBean> cycleBeanMap = new HashMap<>();
DateFormat format = new SimpleDateFormat("yyyy");
DateFormat format2 = new SimpleDateFormat("MM");
try {
//数据源
List<Statisticalprobability> sldata = this.usermapper.getCount();
if (!JiveGlobe.isEmpty(sldata)) {
//数据组装
for (Iterator<Statisticalprobability> iter = sldata.iterator(); iter.hasNext();) {
Statisticalprobability st = iter.next();
Long createtime = Long.parseLong(st.getCreatetime());
String stattype = st.getStattype();
if (!JiveGlobe.isEmpty(createtime)&& !JiveGlobe.isEmpty(stattype)&& year.equals(format.format(createtime))) {
int yueType = Integer.valueOf(format2.format(createtime));
CycleFrequencyBean cb = new CycleFrequencyBean();
switch (yueType) {
case 1:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setJan("1");
cycleBeanMap.put(stattype, cb);
} else {
// 获取到当前对象，替换次数
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getJan())) {
cb.setJan("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setJan(Integer.valueOf(cb.getJan()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 2:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setFeb("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getFeb())) {
cb.setFeb("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setFeb(Integer.valueOf(cb.getFeb()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 3:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setMar("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getMar())) {
cb.setMar("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setMar(Integer.valueOf(cb.getMar()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 4:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setApr("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getApr())) {
cb.setApr("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setApr(Integer.valueOf(cb.getApr()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 5:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setMay("1");
cycleBeanMap.put(stattype, cb);
} else {
// 获取到当前对象，替换次数
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap
.get(stattype).getMay())) {
cb.setMay("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setMay(Integer.valueOf(cb.getMay()) + 1
+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 6:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setJun("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap
.get(stattype).getJun())) {
cb.setJun("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setJun(Integer.valueOf(cb.getJun()) + 1
+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 7:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setJul("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getJul())) {
cb.setJul("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setJul(Integer.valueOf(cb.getJul()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 8:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setAug("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getAug())) {
cb.setAug("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setAug(Integer.valueOf(cb.getAug()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 9:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setSep("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getSep())) {
cb.setSep("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setSep(Integer.valueOf(cb.getSep()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 10: if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setOct("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getOct())) {
cb.setOct("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setOct(Integer.valueOf(cb.getOct()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 11:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setNov("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getNov())) {
cb.setNov("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setNov(Integer.valueOf(cb.getNov()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
case 12:
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype))) {
cb.setDec("1");
cycleBeanMap.put(stattype, cb);
} else {
cb = cycleBeanMap.get(stattype);
if (JiveGlobe.isEmpty(cycleBeanMap.get(stattype).getDec())) {
cb.setDec("1");
cycleBeanMap.put(stattype, cb);
} else {
cb.setDec(Integer.valueOf(cb.getDec()) + 1+ "");
cycleBeanMap.put(stattype, cb);
}
}
break;
}
}
}
}
} catch (Exception e) {
System.out.println(e);
}
return cycleBeanMap;
} }
最新文章
- EntityFramework之孩子删除（四）（你以为你真的懂了？）
- easyui-datagrid连接数据库实现分页查询数据
- Linux CentOS6.5下安装Oracle ASM
- Autofac - 服务
- 测试技能积木-AWK的简要用法
- map遍历
- ZOJ 2672 Fibonacci Subsequence（动态规划+hash）
- c语言操作符 “++”另类行为
- 2014--9=17 软工二班 MyEclipse blue==5
- Mysql加密方式
- iOS uuchart 用法
- ThinkPHP 关联模型（二十）
- SecureCRT使用提示
- CodeForces 747E Comments
- CSS中绝对定位依据谁进行定位？
- 【Angular专题】——（1）Angular，孤傲的变革者
- php 调试的常用方法
- ubuntu下为单个网卡配置多个ip
- Codeforces Round #523 (Div. 2) E. Politics（最小费+思维建图）
- 21069207《Linux内核原理与分析》第四周作业