【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> ...
随机推荐
- Python自动化 【第十六篇】：JavaScript作用域和Dom收尾
本节内容: javascript作用域 DOM收尾 JavaScript作用域 JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,对于JavaScript的作用域主要记住几句话,走 ...
- Convert HTML to Text(转载)
原文地址:http://www.blackbeltcoder.com/Articles/strings/convert-html-to-text Download Source Code Intro ...
- Runtime Reconfiguration
https://coreos.com/etcd/docs/latest/runtime-configuration.html Runtime Reconfiguration 运行时重新配置 etcd ...
- php的数据循环 之li的3个类判断
这种判断必须得保证后台数据的键值为数字 ,反正要能跟数字计算的数据才行 ts2.php <?php$array = array('0'=>'a1','1'=>'b1','2'=> ...
- MySQL中存储过程+事件的使用方法
一.背景 将界面操作日志存储在MySQL数据库中的operationlog表中,如果该表不能自动备份,表中的数据会越来越多,影响速度.可以定期将表中数据备份到另外一个表中来解决. 二.解决方案 1.使 ...
- WCF Misconfiguration: Insufficient Audit Failure Handling
Abstract: The program is configured not to generate an exception when it fails to write to an audit ...
- CSS深入研究:display的恐怖故事解密(2) - table-cell
上集<CSS深入研究:display的恐怖故事解密(1) - display-inline>已经把display的属性列表拉出来溜了,发现在这个属性恐怖面貌其实都是脆弱的伪装.除了部分常用 ...
- bat批处理重命名问题
因为要重命名的字符串中有文字,导致重命名出来的文件名都变为乱码了,查理一下需要加两句话 1. @Echo Off Chcp 65001>nul SetLocal EnableDelayedExp ...
- 深入理解js——自由变量和作用域链
自由变量:在A作用域中使用变量X,却没有在A作用域中声明(在其他作用域中声明),对于A作用域来说X就是一个自由变量. var x=10; function fn(){ var b=20; consol ...
- Canvas 实现图片剪切
用户上传头像然后截图的需求很常见,很多做法是把图像发送到后端,把裁剪后的结果发送给浏览器,这种方式会增加处理时延.最近正好学习了HTML5里的canvas,发现它的图片处理功能比较强大,就打算用can ...