Highcharts双饼图使用实例

这次实践了Highcharts的双饼图,确实比普通饼图复杂多了,关键相关数据 多不能继续用简单基本数据类型Map,list了,单独建了个VO存放要用到的数据,不多说,贴代码!

JS:

/**查看机器占比(按产品线) 2015/8*/
function loadMachineRate(){
	var chart;
	$(document).ready(function(){
		
		chart = new Highcharts.Chart({
			//常规图表选项设置
            chart: {
                renderTo: 'machineRate',        //在哪个区域呈现，对应HTML中的一个元素ID
                plotBackgroundColor: null,    //绘图区的背景颜色
                plotBorderWidth: null,        //绘图区边框宽度
                plotShadow: false            //绘图区是否显示阴影            
            },
            //图表的主标题
            title: {
                text: '按产品线统计机器占比'
            },
            yAxis: {
                title: {
                    text: 'Total percent market share'
                }
      
            },
            //当鼠标经过时的提示设置
            tooltip: {
                formatter: function() {
                   return  this.point.name +': '+ '<b>'+Highcharts.numberFormat(this.percentage, 2) +'% </b><br/>总量: '+
                   		'<b>'+ Highcharts.numberFormat(this.y, 0, ',') +' 台</b>';
                }
             },
          //每种图表类型属性设置
            plotOptions: {
                pie: {
                    shadow: false,
                    center: ['50%', '50%']
                }
            },
            //图表要展现的数据
            series: [{
                name: 'productLine',
                size: '60%',
                type:'pie',
                dataLabels: {
                    color: 'white',
                    distance: -30
                }
            }, {
                name: 'machineStatus',
                type:'pie',
                size: '80%',
                innerSize: '60%',
                dataLabels: {
                  
                }
            }]
            
		});
	});
	$.ajax({
		type : "GET",
		/*url : "machine/getStaticMachineRateByProductLine",*/
		url : "machine/getMachineRateVOByProductline",
		success : function(data){
	        var allMachineCount = 0;//所有机器总数
	        for(i in data){
	            allMachineCount += data[i].allMachine;
	        }
	        console.log("所有机器"+allMachineCount);
	        var colors = Highcharts.getOptions().colors,
	        categories = ['网页', '下载', '点播', '视频'],
	        data = [{
	            y: data[0].allMachine,
	            color: colors[0],
	            drilldown: {
	                name: '机器状态',
	                categories: ['网页投产未使用', '网页投产使用', '网页投产无IP', '网页待下架','网页上架完毕','网页故障','网页下架中'],
	                data: [data[0].freeMachineCount,data[0].workMachineCount,data[0].noIp,data[0].waitShelfCount,data[0].onShelfCount,data[0].bugCount,data[0].offShelfCount],
	            }
	        }, {
	            y: data[1].allMachine,
	            color: colors[1],
	            drilldown: {
	                name: '机器状态',
	                categories: ['下载投产未使用', '下载投产使用', '下载投产无IP', '下载待下架','下载上架完毕','下载故障','下载下架中'],
	                data: [data[1].freeMachineCount,data[1].workMachineCount,data[1].noIp,data[1].waitShelfCount,data[1].onShelfCount,data[1].bugCount,data[1].offShelfCount],
	            }
	        }, {
	            y: data[2].allMachine,
	            color: colors[2],
	            drilldown: {
	                name: '机器状态',
	                categories: ['点播投产未使用', '点播投产使用', '点播投产无IP', '点播待下架','点播上架完毕','点播故障','点播下架中'],
	                data: [data[2].freeMachineCount,data[2].workMachineCount,data[2].noIp,data[2].waitShelfCount,data[2].onShelfCount,data[2].bugCount,data[2].offShelfCount],
	            }
	        }, {
	            y: data[3].allMachine,
	            color: colors[3],
	            drilldown: {
	                name: '机器状态',
	                categories: ['视频投产未使用', '视频投产使用', '视频投产无IP', '视频待下架','视频上架完毕','视频故障','视频下架中'],
	                data: [data[3].freeMachineCount,data[3].workMachineCount,data[3].noIp,data[3].waitShelfCount,data[3].onShelfCount, data[3].bugCount,data[3].offShelfCount],
	            }
	        }],
	        productlineData = [],
	        statusData = [],
	        i,
	        j,
	        dataLen = data.length,
	        drillDataLen,
	        brightness;
	        
	        // Build the data arrays
	        for (i = 0; i < dataLen; i += 1) {
	            // add productline data
	            productlineData.push({
	                name: categories[i],
	                y: data[i].y,
	                color: data[i].color
	            });
	            // add status data
	            drillDataLen = data[i].drilldown.data.length;
	            for (j = 0; j < drillDataLen; j += 1) {
	                brightness = 0.22 - (j / drillDataLen)/4;
	                statusData.push({
	                    name: data[i].drilldown.categories[j],
	                    y: data[i].drilldown.data[j],
	                    color: Highcharts.Color(data[i].color).brighten(brightness).get()
	                });
	            }
	        }
	        console.log(productlineData);
	        console.log(statusData);
	        chart.series[0].setData(productlineData);  
	        chart.series[1].setData(statusData);  
		},
		error : function(e){
			/*alert(e);*/
		}
	});
}

Controller:

/**
 * 获取产品线下不同机器状态的机器数量
 */
@RequestMapping("/getMachineRateVOByProductline")
@ResponseBody
public List<MachineRateVO> getMachineRateVOByProductline(){
	List<MachineRateVO> machineRateVOs = platformMachineService.getMachineRateVOByProductline();
	return machineRateVOs;
}

Service:

/**
 * 获取产品线下不同机器状态的机器数量
 */
@Override
public List<MachineRateVO> getMachineRateVOByProductline() {
	List<MachineRateVO> machineRateVOs = new ArrayList<MachineRateVO>();
	//根据产品线统计机器占比(饼图)
	List<Map<String, Integer>> productlineMaps = this.platformMachineMapper.getStaticMachineRateByProductLine();
	
	//循环每一条产品线 
	for (Map<String, Integer> productlineMap : productlineMaps) {
		Iterator it = productlineMap.entrySet().iterator();
		while(it.hasNext()){
			Map.Entry entry =  (Map.Entry) it.next(); 
			Object key = entry.getKey(); 
			Object val = entry.getValue(); 
			if (key.toString().equals("businessType")) {
				List<com.dnion.platform.dao.mybatis.entity.PlatformMachine> platformMachines = this.platformMachineMapper.getPlatformMachinesByProductline(val.toString());
				MachineRateVO machineRateVO = wrapMachineRateVO(val.toString(),platformMachines);
				machineRateVOs.add(machineRateVO);
			}
		}
	}
	return machineRateVOs;
}

Method:

/**
 * 封装platformMachine为MachineRateVO
 */
@SuppressWarnings("null")
private MachineRateVO wrapMachineRateVO(String businessType,List<com.dnion.platform.dao.mybatis.entity.PlatformMachine> platformMachines) {
	int waitShelfCount = 0;//待下架
	int offShelfCount = 0;//下架中
	int onShelfCount = 0;//上架完毕
	int bugCount = 0;//故障
	int operationCount = 0;//投产
	int freeMachineCount = 0;//未使用
	int workMachineCount = 0;//使用
	int noIp = 0;//无ip
	
	MachineRateVO machineRateVO = new MachineRateVO();
	for(com.dnion.platform.dao.mybatis.entity.PlatformMachine platformMachine : platformMachines){
		if (platformMachine.getMcRunStatus().equals("OPERATION")) {//投产 
			operationCount += 1;
			List<PlatformMachineIp> platformMachineIps = platformMachine.getPlatformMachineIps();
			if (platformMachineIps.size() != 0) { //有ip
				Set<Integer> mcIpStatus = new HashSet<Integer>();
				for(PlatformMachineIp platformMachineIp : platformMachineIps){
					mcIpStatus.add((int)platformMachineIp.getMcIpStatus());
				}
				if (mcIpStatus.contains(5)) {//有空闲ip 则为空闲机器
					freeMachineCount += 1;
				}else {
					workMachineCount += 1;
				}
				
			}else {//无ip
				noIp += 1;
			}
		}else if (platformMachine.getMcRunStatus().equals("OFFSHELF")) {
			offShelfCount += 1;
		}else if (platformMachine.getMcRunStatus().equals("ONSHELF")) {
			onShelfCount += 1;
		}else if (platformMachine.getMcRunStatus().equals("BUG")) {
			bugCount += 1;
		}else if (platformMachine.getMcRunStatus().equals("WAITSHELF")) {
			waitShelfCount += 1;
		}
	}
	machineRateVO.setWaitShelfCount(waitShelfCount);
	machineRateVO.setOffShelfCount(offShelfCount);
	machineRateVO.setOnShelfCount(onShelfCount);
	machineRateVO.setBugCount(bugCount);
	machineRateVO.setOperationCount(operationCount);
	machineRateVO.setFreeMachineCount(freeMachineCount);
	machineRateVO.setWorkMachineCount(workMachineCount);
	machineRateVO.setBusinessType(businessType);
	machineRateVO.setNoIp(noIp);
	machineRateVO.setAllMachine(platformMachines.size());
	return machineRateVO;
}

VO:

/**
 * 产品线机器占比页面视图
 */
public class MachineRateVO {
	
	/** 主要元素 下面的数量都是对应于该产品线 */
	private String businessType;//产品线类型 主要元素 下面的数量都是对应于该产品线
	private Integer allMachine;//产品线下的所有机器
	private Integer waitShelfCount;//待下架机器数量
	private Integer offShelfCount;//下架中机器数量
	private Integer onShelfCount;//上架完毕机器数量
	private Integer bugCount;//故障机器数量
	private Integer operationCount;//投产机器数量
	
	//freeMachineCount+workMachineCount=operationCount
	private Integer freeMachineCount;//未使用机器数量
	private Integer workMachineCount;//使用的机器数量
	private Integer noIp;//投产但无ip
	
	public MachineRateVO(){
	}
	
	getter and setter...
}

基本上就是以上代码了,下面是效果图: