highcharts在J2EE中绘制柱状图实例(从后台获取动态数据)
1.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/include/taglibs.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
var chart;
function showHighCharts(data, status, container) {
var options = {
chart : {
type : 'column',
plotBorderWidth : 1,
plotShadow : true,
renderTo : container
},
title : {
text : '当前' + status + '状态'
},
xAxis : {
categories : [ '数量' ],
labels : {
align : 'right',
style : {
fontSize : '13px',
fontFamily : 'Verdana, sans-serif'
}
}
},
yAxis : {
min : 0,
title : {
text : 'Population(millions)'
},
labels : {
step : 2
}
},
tooltip : {
formatter : function() {
return '<b>' + this.x + '</b><br/>' + '状态数: '
+ Highcharts.numberFormat(this.y, 1) + '个';
}
}
};
options.series = [];
// data它是从数据库中查出来的值的列表, 是一个list
for ( var i = 0; i < data.length && data != null; i++) {
if (data[i][0] == '警告') {
options.series[i] = {
name : data[i][0],
color : 'yellow',
data : [ parseFloat(data[i][1]) ]
};
} else if (data[i][0] == '正常') {
options.series[i] = {
name : data[i][0],
color : 'lime',
data : [ parseFloat(data[i][1]) ]
};
} else if (data[i][0] == '故障') {
options.series[i] = {
name : data[i][0],
color : 'red',
data : [ parseFloat(data[i][1]) ]
};
} else {
options.series[i] = {
name : '其他',
color : 'blue',
data : [ parseFloat(data[i][1]) ]
};
}
}
chart = new Highcharts.Chart(options);
}
function getDataForHighcharts() {
jQuery.getJSON('${ctx }/performance/hoststatus.do?method=countStatus',
null, function(data) {
//为图表设置值
datas = [],
//迭代，把异步获取的数据放到数组中
$.each(data, function(n, v) {
datas.push([ n, v ]);
});
showHighCharts(datas, "主机", "hostcontainer");
});
jQuery.getJSON(
'${ctx }/performance/servicestatus.do?method=countStatus',
null, function(data) {
//为图表设置值
datas = [],
//迭代，把异步获取的数据放到数组中
$.each(data, function(n, v) {
datas.push([ n, v ]);
});
showHighCharts(datas, "服务", "servicecontainer");
});
}
getDataForHighcharts();
</script>
</head>
<body>
<div id="hostcontainer"
style="height: 400px; width: 400px; margin: 100 auto; float: left;"></div>
<div id="servicecontainer"
style="height: 400px; width: 400px; margin: 0 auto; float: left;"></div>
</body>
</html>
2.action中
@RequestMapping(params = { "method=countStatus" })
@ResponseBody
public Map<String, Object> countStatus() {
Map<String, Object> returnMap = new LinkedHashMap<String, Object>();
Map<Integer, Integer> dataMap = this.hostStatusService
.countCurrentState();
returnMap.put(
"正常",
getHostStateCount(dataMap,
PerformanceConstant.HOST_STATE_NORMAL));
returnMap.put(
"故障",
getHostStateCount(dataMap,
PerformanceConstant.HOST_STATE_CRITICAL));
returnMap.put(
"警告",
getHostStateCount(dataMap,
PerformanceConstant.HOST_STATE_WARNING));
return returnMap;
}
3.service中
@Override
public Map<Integer, Integer> countCurrentState() {
String hql="select a.currentState,count(*) from HostStatus a group by a.currentState";
Map<Integer, Integer> map = new LinkedHashMap<Integer, Integer>();
List<Object[]> list= this.getSession().createQuery(hql).list();
for (Object[] objs : list){
Integer state =Integer.parseInt(objs[0].toString());
Integer c = Integer.parseInt(objs[1].toString());
map.put(state, c);
}
return map;
}