Highcharts与json结合完美运用
框架采用的时
Struts1跟Spring结合
数据库的mysql
jdk 1.7
tomcat6
1.柱状图页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>折线图</title>
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../highchart/highcharts.js"></script>
<script type="text/javascript" src="../highchart/highcharts-3d.js"></script>
<script type="text/javascript" src="../highchart/jdate.min.js"></script>
<script type="text/javascript" src="../highchart/dark-unica.js"></script>
<script type="text/javascript" src="../highchart/exporting.js"></script>
</head>
<script type="text/javascript">
$(function (){
getdate();
});
function getdate() {
//从后台获取json格式的数据
$.ajax({
type: "POST",
url: "/oa/UserAction.do?method=showDetail",
dataType:"JSON",
success: function(data){
//alert(data);
var data = JSON.parse(data);
browsers = [];
var datatemp;
for(var i=0;i<data.length;i++){
var username = data[i].username;
//alert(username);
var month = data[i].month;
var febuery = data[i].febuery;
var march = data[i].march;
//var april = data[i].april;
//var may = data[i].may;
//alert(browsers.push([username,month,febuery,march]));
datatemp += "{name: '"+ data[i].username +"',data:["+ month +","+ febuery +","+ march +" ]}" + ",";
}
//去除最后一个字符
datatemp=datatemp.substring(9,datatemp.length);
//alert(datatemp.length);
datatemp=datatemp.substring(0,datatemp.length-1);
//alert(datatemp);
getAllchart(datatemp);
}
});
};
function getAllchart(datatemp){
// 设置打野下载汉化
Highcharts.setOptions({
lang: {
printChart:"打印图表",
downloadJPEG: "下载JPEG 图片" ,
downloadPDF: "下载PDF文档" ,
downloadPNG: "下载PNG 图片" ,
downloadSVG: "下载SVG 矢量图" ,
exportButtonTitle: "导出图片" ,
months: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao?t', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
weekdays: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
}
});
$('#container').highcharts({
chart : {
type : 'column' , //指定图表的类型,默认是折线图(line)
renderTo: 'container'
},
title : {
text : '中关村电脑销售表统计' //指定图表标题
},
subtitle:{
text: '2017每月份研发产品统计'
},
xAxis : {
categories : [ '一月份', '二月份','三月份' ] //指定x轴分组
},
yAxis : {
title : {
text : '研发量(万)' // 指定y轴的标题
}
},
exporting:
{
enabled:true,//默认为可用,当设置为false时,图表的打印及导出功能失效
buttons:{ //配置按钮选项
/* printButton:{ //配置打印按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-200,
y:20
},
exportButton:{ //配置导出按钮
width:50,
symbolSize:20,
borderWidth:2,
borderRadius:0,
hoverBorderColor:'red',
height:30,
symbolX:25,
symbolY:15,
x:-150,
y:20
}, */
},
filename:'统计表',//导出的文件名
type:'image/png',//导出的文件类型
width:800 //导出的文件宽度
},
series : eval("[" + datatemp + "]")
//series : [ datatemp ]
});
$(function(){
$('#button').click(function () {
//getdate();
var chart = $('#container').highcharts();
chart.exportChart();
});
});
};
</script>
<body>
<div id="container" style="min-width:400px;height:500px"></div>
<button id="button">导出图表</button>
</body>
</html>
后台
DAO层
/**
* 2017-02-24
* 柱状图
*/
@SuppressWarnings("unchecked")
public List<OaUser> getall() throws Exception{
List<OaUser> lists = new ArrayList<OaUser>();
String sql = "select username,month,febuery,march from OaUser";
List<Object[]> list = getHibernateTemplate().find(sql);
Iterator<Object[]> obj = list.iterator();
while(obj.hasNext()){
Object[] ob =obj.next();
OaUser user = new OaUser();
user.setUsername((String)(ob[0]==null?"":ob[0]));
user.setMonth((Double) (ob[1]==null?"":ob[1]));
user.setFebuery((Double) (ob[2]==null?"":ob[2]));
user.setMarch((Double) (ob[3]==null?"":ob[3]));
//user.setApril((Double) (ob[4]==null?"" :ob[4]));
//user.setMay((Double) (ob[5]==null?"" :ob[5]));
lists.add(user);
Service层
Action层
/**
* 显示详细信息柱状图
* @param mapping
* @param form
* @param request
* @param response
* @return
* @throws Exception
*/
public ActionForward showDetail(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)
throws Exception {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=utf-8");
//UserForm forms = (UserForm) form;
List<OaUser> user = null;
//List<OaUser> user = new ArrayList<OaUser>();
user = userService.getall();
Gson gson = new Gson();
String str = gson.toJson(user);
PrintWriter writer = response.getWriter();
writer.print(str);
writer.flush();
writer.close();
System.out.println(str);
return mapping.findForward("view");
}