使用HighCharts实现堆叠条形图
参考官网：https://code.hcharts.cn/demos/hhhhD0
效果图：
这里我主要说一下数据组织和JS中Map的解析：
1.数据组织方式,以这个productNum(示例值：456,345,123)值做为横向坐标，首先思路就是竖向坐标是固定的，那么我们只需要计算出来productNum类型有多少个就可以了，然后创建一个List按照竖向坐标的顺序把每个productNum类型的数据添加到List中，List是固定大小的，因为productNum就竖向坐标这几种；
public HashMap
ArrayList
HashMap
if(list.size() > 0){
//计算出有多少种productNum型号
for( int i=0; i<list.size(); i++){
if(map.get(list.get(i).getProductNum()) == null){
ArrayList
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
numList.add(null);
map.put(list.get(i).getProductNum(), numList);
}
if("器材".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(0, list.get(i));
}else if("软件".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(1, list.get(i));
}else if("设备".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(2, list.get(i));
}else if("设计".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(3, list.get(i));
}else if("操作".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(4, list.get(i));
}else if("环境".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(5, list.get(i));
}else if("工艺".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(6, list.get(i));
}else if("管理".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(7, list.get(i));
}else if("其他".equals(list.get(i).getQualityResons())){
map.get(list.get(i).getProductNum()).set(8, list.get(i));
}
}
}
return map;
}
2.HighChart显示数据(主要了解Map在JS中的解析)
$.ajax({
url:"<%=realPath%>/count/selectQltyDistribution",
type:"post",
data:{'providerId':providerId},
dataType:"json",
success:function (result){
var series = [];
var index = 0;
//result返回的是Map类型，这里需要学习一下Map解析如何使用，然后按照要求组着数据即可
$(result).each(function(i){
for (var key in result) { // 遍历Map
var dataCount = [];
var name = '';
for(var i=0; i if(result[key][i] != null){ dataCount[i] = result[key][i].count; name = result[key][i].productNum; }else{ dataCount[i]=0; } } series[index] = {'name':name, 'data':dataCount}; index++; } }); $('#qltycontainer').highcharts({ credits : { enabled : false }, chart: { type: 'bar' }, title: { text: '质量问题分布' }, xAxis: { categories: ['器材', '软件', '设备', '设计', '操作', '环境', '工艺', '管理', '其他'] }, yAxis: { min: 0, title: { text: '' } }, legend: { reversed: true }, plotOptions: { series: { stacking: 'normal' } }, series: series }); } }); }); <div id="qltycontainer" style="min-width:400px;height:600px">div>