【javascript】：Highcharts实战
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;
} }
【javascript】：Highcharts实战的更多相关文章
- 《JavaScript编程实战》
<JavaScript编程实战> 基本信息 原书名:JavaScript programming: pushing the limits 作者: (美)Jon Raasch 译者: 吴海星 ...
- JavaScript DOM实战：创建和克隆元素
DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
- JavaScript正则实战
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
- javascript项目实战---ajax实现无刷新分页
分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...
- javascript高级实战学习
学习目标: - 理解面向对象开发思想 - 掌握 JavaScript 面向对象开发相关模式 - 掌握在 JavaScript 中使用正则表达式 - typora-copy-images-to medi ...
- JavaScript基础&实战（2）js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符
文章目录 1.强制类型转换Number 1.1 代码 1.2 测试结果 2.进制表示 2.1 代码 2.2 测试结果 3.强制类型转换为Boolea 3.1 代码 3.2 测试结果 4.运算符 4.1 ...
- JavaScript基础&实战（1）js的基本语法、标识符、数据类型
文章目录 1.JavaScript简介 2.输出语句 2.1 代码块 2.2 测试结果 3.JS编写位置 3.1代码 3.2 测试结果 4.基本语法 4.1 代码 5.标识符 5.1 代码 6.数据类 ...
- JavaScript基础&实战 JS中正则表达式的使用
文章目录 1.正则表达式 1.1 代码 1.2 测试结果 2.splict | search 2.1 代码 2.2 测试结果 1.正则表达式 1.1 代码 <!DOCTYPE html> ...
随机推荐
- java中值传递和引用传递
最近工作中使用到了值传递和引用传递,但是有点懵,现在看了下面的文章后清晰多了.一下是文章(网摘) 1:按值传递是什么 指的是在方法调用时,传递的参数是按值的拷贝传递.示例如下: public clas ...
- CAN总线(一)
原文出处:http://www.cnblogs.com/jacklu/p/4729638.html 嵌入式的工程师一般都知道CAN总线广泛应用到汽车中,其实船舰电子设备通信也广泛使用CAN,随着国家对 ...
- MIME Sniffing
Abstract: The web.config file does not include the required header to mitigate MIME sniffing attacks ...
- 如何让table中td宽度固定
table中td会随着里面的内容伸缩,设置其width样式并没有效果.这个时候需要下面的CSS可以实现. 首先是设置table .table {table-layout:fixed;} 其次是td . ...
- RabbitMQ的work queue(1)
http://www.rabbitmq.com/tutorials/tutorial-two-java.html 在第一个教程中,我们通过一个命名队列来发送消息和接受消息.在这一节,我们将创建一个工作 ...
- C#中Invoke 和 BeginInvoke 的区别
Control.Invoke 方法 (Delegate) :在拥有此控件的基础窗口句柄的线程上执行指定的委托. Control.BeginInvoke 方法 (Delegate) :在创建控件的基础句 ...
- JQuery Mobile入门——设置后退按钮文字(转)
http://www.tuicool.com/articles/AZnYVz JQuery Mobile入门——设置后退按钮文字 时间 2013-01-09 20:24:28 CSDN博客原文 h ...
- Oracle学习线路
出自huyangg的博客,地址是:oracle学习路线图 1.sql.pl/sql(网上有很多的视频,可以做一个简单的入手,然后看几本书,多做实验) 作为oracle的基本功,需要大家对sql和 ...
- 神经网络（python源代码）
神经网络的逻辑应该都是熟知的了,在这里想说明一下交叉验证 交叉验证方法: 看图大概就能理解了,大致就是先将数据集分成K份,对这K份中每一份都取不一样的比例数据进行训练和测试.得出K个误差,将这K个误差 ...
- Android两个子线程之间通信
Android中,相信主线程和子线程之间的通信大家都不陌生了吧.在一次面试经历中被问到了两个子线程之间是如何进行通信的.哎呦!这可蒙住我了.后来回家研究了下,分享给大家. 其实android中线程通信 ...