這次實踐了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双饼图使用实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。