【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> ...
随机推荐
- CVPR 2011 Global contrast based salient region detection
Two salient region detection methods are proposed in this paper: HC AND RC HC: Histogram based contr ...
- ES5 的 forEach, map, filter, some, every 方法
1: forEacharray.forEach(callback,[ thisObject]) // 遍历数组里面的所有数字// item 是值, i 是序号, array 是整个数组 [1, 2 ...
- linux 学习8 权限管理
第八章 权限管理 8.1 ACL权限 8.2 文件特殊权限 8.3 文件系统属性chattr权限 8.4 系统命令sudo权限 8.1 ACL权限 ACL权限简介与开启 查看与设定ACL权限 最大有效 ...
- 关于struts2中的相对路径与绝对路径
从昨天开始复习了struts2的课程,之所以重新走上java的道路,是觉得写了一年的go程序,并没有感觉到学习了什么,反而把java给忘得干干净净的.想想我的计划,年后就要换工作了,至于要换到什么方向 ...
- 2016 ICPC China-Final 现场赛总结
距离比赛结束快有一个礼拜了才抽出时间来写这篇总结.今年比赛打了也有5场了(4场区域赛+1场省赛),也取得了不错的成绩(区域赛两银),总的来说第一年就取得这成绩还是挺高兴的.我们队,我自己都渐渐的趋于成 ...
- JavaScript prototype 使用介绍
用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属性,可以为其添加函数供实例访问,其它的就不清楚了, ...
- 【css3】浏览器内核及其兼容性
浏览器内核分类如下: 1.Webkit内核: 使用此引擎内核的浏览器有:Safari(包括移动版和桌面版).Chrome.其私有属性的前缀是-webkit-. 2.Gecko内核: 使用此引擎内核的浏 ...
- Java基础---AWT
流式布局FlowLayout package net.zyz; import java.awt.Button; import java.awt.FlowLayout; import java.awt. ...
- Mediator(中介者）-对象行为型模式
1.意图 用一个中介对象来封装一系列的对象交互.中介者使各个对象不需要显示地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 2.动机 通过将集体行为封装在一个单独的中介者对象中,中介者 ...
- Request header is too large
当request url过长的时候,经常tomcat后台就会包 "Request header is too large"错误. 解决方法:修改server.xml文件,linux ...