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...
}
基本上就是以上代码了,下面是效果图:
