使用HighCharts实现堆叠条形图

参考官网：https://code.hcharts.cn/demos/hhhhD0

效果图：

这里我主要说一下数据组织和JS中Map的解析：

1.数据组织方式,以这个productNum(示例值：456,345,123)值做为横向坐标，首先思路就是竖向坐标是固定的，那么我们只需要计算出来productNum类型有多少个就可以了，然后创建一个List按照竖向坐标的顺序把每个productNum类型的数据添加到List中，List是固定大小的，因为productNum就竖向坐标这几种；

public HashMap<String, ArrayList<BizQltyProbCountByReasons>> selectQltyDistribution(Long providerId){

ArrayList<BizQltyProbCountByReasons> list = qltyProbMapper.selectQltyDistribution(providerId);

HashMap<String, ArrayList<BizQltyProbCountByReasons>> map= new HashMap<String, ArrayList<BizQltyProbCountByReasons>>();

if(list.size() > 0){

//计算出有多少种productNum型号 

for( int i=0; i<list.size(); i++){

if(map.get(list.get(i).getProductNum()) == null){

ArrayList<BizQltyProbCountByReasons> numList = new ArrayList<BizQltyProbCountByReasons>();

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<result[key].length; 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>