Highcharts双饼图使用实例

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

JS:

/**查看机器占比(按产品线) 2015/8*/
function loadMachineRate(){var chart;$(document).ready(function(){chart = new Highcharts.Chart({//常规图表选项设置chart: {renderTo: 'machineRate',        //在哪个区域呈现，对应HTML中的一个元素IDplotBackgroundColor: 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 arraysfor (i = 0; i < dataLen; i += 1) {// add productline dataproductlineData.push({name: categories[i],y: data[i].y,color: data[i].color});// add status datadrillDataLen = 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;//无ipMachineRateVO 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) { //有ipSet<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 {//无ipnoIp += 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=operationCountprivate Integer freeMachineCount;//未使用机器数量private Integer workMachineCount;//使用的机器数量private Integer noIp;//投产但无ippublic MachineRateVO(){}getter and setter...
}

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

Highcharts双饼图使用实例相关推荐

Highcharts+Spring饼图使用实例
项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现 JSP: <script type="text/javascript" src=&q ...
html5饼图颜色渐变,Highcharts 渐变饼图
Highcharts 渐变饼图以下实例演示了渐变饼图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 colors 配置使用 Highcha ...
Highcharts Pie 饼图提示标签IE下重叠解决方法，及json数据绑定方法
Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法参考文章: (1)Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法 (2)ht ...
python画柱状图代码-python绘制双柱形图代码实例
图表是比干巴巴的表格更直观的表达,简洁.有力.工作中经常遇到的场景是,有一些数值需要定时的监控,比如服务器的连接数.活跃用户数.点击某个按钮的人数,并且通过邮件或者网页展示出来.当我们想关注比数值本身 ...
python画柱形图-python绘制双柱形图代码实例
图表是比干巴巴的表格更直观的表达,简洁.有力.工作中经常遇到的场景是,有一些数值需要定时的监控,比如服务器的连接数.活跃用户数.点击某个按钮的人数,并且通过邮件或者网页展示出来.当我们想关注比数值本身 ...
python 柱形图_python绘制双柱形图代码实例
图表是比干巴巴的表格更直观的表达,简洁.有力.工作中经常遇到的场景是,有一些数值需要定时的监控,比如服务器的连接数.活跃用户数.点击某个按钮的人数,并且通过邮件或者网页展示出来.当我们想关注比数值本身 ...
【Python】用 Highcharts 绘制饼图，也很强大
来源:Python数据之道作者:Peter 整理:阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 Jav ...
肝！用 Highcharts 绘制饼图，也很强大
来源 / Python数据之道作者/Peter 整理/阳哥用 Highcharts 绘制饼图,也很强大前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 ...
Matlab plotyy画双纵坐标图实例
转载自:http://blog.sina.com.cn/s/blog_49d955150100lxoe.html Matlab plotyy画双纵坐标图实例 x = 0:0.01:20; y1 = 2 ...

Highcharts双饼图使用实例

Highcharts双饼图使用实例相关推荐

最新文章

热门文章