java ssm饼图_SSM框架下柱状图的实现

和前面的饼图不一样，我的柱状图实现在ajax中使用了数组，只需要将对应的值取出来(而不需要关心其他的值是否为空)。就要简单一点，使用普通的Mapper.xml就可以应付。话不多说，上码：

1. Mapper.xml和Mapper.java:

xml:

SELECT asex,COUNT(asex) AS aid FROM adminuser GROUP BY asex

java:

List groupBySex();

2. 其他的dao层，service层就不贴了，这只是一个简单的传递。。。

3. Controller层：

//统计男女人数 柱状图

@RequestMapping(value="/groupBySex")

@ResponseBody

public List groupBySex(){

List adminusers = adminuserService.groupBySex();

return adminusers;

}

4. 最后jsp页面用ajax取值并创建图表：

管理员男女比例柱图

$(function(){

$.ajax({

url:"adminuser/groupBySex",

type:"post",

data:{},

dataType:"json",

success:function(adminusers){

var Arrs = new Array();

$(adminusers).each(function(i,adminuser){

var Arr = new Array();

Arr.push(adminuser.asex);

Arr.push(adminuser.aid);

Arrs.push(Arr);

});

var jsonarray = Array();

$(Arrs).each(function(i,arr){

var arr ={"x" : arr[0],"y" : arr[1]}

jsonarray.push(arr);

});

var bar = new Morris.Bar({

element: 'bar-chart',

resize: true,

data: jsonarray,//JSON数组类型数据

barColors: ['#00a65a'],

xkey: 'x',

ykeys: ['y'],

labels: ['人数'],

hideHover: 'auto'

});

}

});

});

5. 额，采用的js有点多，我也贴出来吧：

最后，放张效果图：