highcharts动态获取数据生成柱状图


使用Highcharts控件实现柱状图，前端显示主要使用Highchartst图表库，后端使用SpringMVC框架从数据库获取数据，前后端数据交互采用Json数据格式，由于篇幅问题数据库代码就不提供了。主要代码如下：

1. 在页面头部引用Hightcharts文件

<!-- highCharts -->
<script type='text/javascript' src='<%=request.getContextPath()%>/js/highCharts/highcharts.js'></script>

2. 在页面中添加一个div元素，用来放置Highcharts图表，需要设置其ID值

<div data-options="region:'center',title:'应用异常统计图'"id="rightdiv" style="border-top: 0"></div>

3. 添加JavaScript代码来初始化图表。renderTo参数用来设置图表渲染的位置，参考第2点

/**展示柱状图*/
function showHighCharts(categories,data,name){
var series={};
series.name=name;
series.data=data;
chart = new Highcharts.Chart({
chart: {
renderTo: 'rightdiv',     		//图表放置的容器，关联DIV#id
type: 'bar',			    	//横的，即条形图
reflow:false			  		//自适应div的大小
},
title: {
text: '应用异常统计图'				//图表标题
},
xAxis: {                        	//X轴标签
categories:categories
},
yAxis: {  						    //设置Y轴
title: {
text: '异常 (次数)'
}
},
legend: {                    		//设置图例
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: -100,                y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:[series]
});
}

4. 动态获取数据并且将每根柱子加上不同的颜色

/**获取柱状图所需数据*/
function getDataForHighcharts() {
var name=null;
var categories=[];
var list={};
var queryField=jQuery("#queryField").val();
var begin=jQuery("#begin").val();
var end=jQuery("#end").val();
$.ajax({
async : false,
cache:false,
type: 'POST',
dataType : "json",
url:'<%=request.getContextPath()%>/crashLog/getHightChatCrashLogCount.do?\
queryField='+queryField+'&begin='+begin+'&end='+end,//请求的路径
success:function(data){
if(data.length != 0){
name = "次数";
var allColors = ["#4572A7", "#AA4643", "#89A54E", "#80699B",
"#3D96AE", "#DB843D", "#92A8CD", "#A47D7C", "#B5CA92"];
list=new Array();
var k=0;
for(var i=0;i<data.length;i++){
var data1={};
data1.y=data[i].total;//次数(y轴)
if(k>=9){//轮循颜色
k-=9;
}
data1.color=allColors[k];
list.push(data1);
k++;
if($("#queryField").val()=="deviceModel"){
var deviceStr=data[i].deviceModel;
if(deviceStr.length>15){//切取字符串
var deviceSubStr=deviceStr.substr(0,15)+"...";
categories[i] = deviceSubStr;
}else{
categories[i] = data[i].deviceModel;//名称(X轴)
}
}
else if($("#queryField").val()=="systemName"){
var systemNameAll=data[i].systemName;
if(systemNameAll=="1"){
sysemNameAll="android";
}
else{
sysemNameAll="ios";
}
categories[i] =sysemNameAll;
}
else if($("#queryField").val()=="appVersion"){
categories[i] =data[i].appVersion;
}else{
categories[i] =data[i].deviceManufacturer;
}
}
}
showHighCharts(categories,list,name);
}
});
}

5. 后端代码

/**
* 柱状图
* 根据设备产品名称、运营商名称、应用版本名称、设备制造商名称、开始时间和结束时间获取崩溃日志柱状图统计信息
* @param
* @return
* @throws IOException
*/
@RequestMapping("/getHightChatCrashLogCount")
public void getHightChatCrashLogCount(HttpServletRequest request,HttpServletResponse response)throws IOException{
response.setContentType("text/html;charset=UTF-8");
Map<String, Object> map = new HashMap<String, Object>();
String queryField=request.getParameter("queryField");  //以下if语句将下拉列表框的值转成数据表里含有的字段名
if(queryField.equals("deviceModel")){
String deviceModel=queryField;
map.put("deviceModel", deviceModel);
}
else if(queryField.equals("systemName")){
String systemName=queryField;
map.put("systemName", systemName);
}
else if(queryField.equals("appVersion")){
String appVersion=queryField;
map.put("appVersion", appVersion);
}
else{
String deviceManufacturer=queryField;
map.put("deviceManufacturer", deviceManufacturer);
}

String begin=request.getParameter("begin");
String end=request.getParameter("end");
if(!"".equals(begin) && "".equals(end)){
end = DateUtil.dateToString(new Date(), DateUtil.DATE_FORMAT_ONE);
}
map.put("begin", begin);
map.put("end", end);

List<CrashLog> crashLogCount=crashLogBiz.getCrashLogCount(map);

JSONArray jArray=JSONArray.fromObject(crashLogCount);
response.getWriter().print(jArray);
}

参考官网示例：http://www.hcharts.cn/demo/index.php?p=36