這次實(shí)踐了Highcharts的雙餅圖,確實(shí)比普通餅圖復(fù)雜多了,關(guān)鍵相關(guān)數(shù)據(jù) 多不能繼續(xù)用簡(jiǎn)單基本數(shù)據(jù)類型Map,list了,單獨(dú)建了個(gè)VO存放要用到的數(shù)據(jù),不多說(shuō),貼代碼!

JS:

/**查看機(jī)器占比(按產(chǎn)品線) 2015/8*/ function loadMachineRate(){var chart;$(document).ready(function(){chart = new Highcharts.Chart({//常規(guī)圖表選項(xiàng)設(shè)置chart: {renderTo: 'machineRate', //在哪個(gè)區(qū)域呈現(xiàn)，對(duì)應(yīng)HTML中的一個(gè)元素IDplotBackgroundColor: null, //繪圖區(qū)的背景顏色plotBorderWidth: null, //繪圖區(qū)邊框?qū)挾萷lotShadow: false //繪圖區(qū)是否顯示陰影 },//圖表的主標(biāo)題title: {text: '按產(chǎn)品線統(tǒng)計(jì)機(jī)器占比'},yAxis: {title: {text: 'Total percent market share'}},//當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)的提示設(shè)置tooltip: {formatter: function() {return this.point.name +': '+ '<b>'+Highcharts.numberFormat(this.percentage, 2) +'% </b><br/>總量: '+'<b>'+ Highcharts.numberFormat(this.y, 0, ',') +' 臺(tái)</b>';}},//每種圖表類型屬性設(shè)置plotOptions: {pie: {shadow: false,center: ['50%', '50%']}},//圖表要展現(xiàn)的數(shù)據(jù)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;//所有機(jī)器總數(shù)for(i in data){allMachineCount += data[i].allMachine;}console.log("所有機(jī)器"+allMachineCount);var colors = Highcharts.getOptions().colors,categories = ['網(wǎng)頁(yè)', '下載', '點(diǎn)播', '視頻'],data = [{y: data[0].allMachine,color: colors[0],drilldown: {name: '機(jī)器狀態(tài)',categories: ['網(wǎng)頁(yè)投產(chǎn)未使用', '網(wǎng)頁(yè)投產(chǎn)使用', '網(wǎng)頁(yè)投產(chǎn)無(wú)IP', '網(wǎng)頁(yè)待下架','網(wǎng)頁(yè)上架完畢','網(wǎng)頁(yè)故障','網(wǎng)頁(yè)下架中'],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: '機(jī)器狀態(tài)',categories: ['下載投產(chǎn)未使用', '下載投產(chǎn)使用', '下載投產(chǎn)無(wú)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: '機(jī)器狀態(tài)',categories: ['點(diǎn)播投產(chǎn)未使用', '點(diǎn)播投產(chǎn)使用', '點(diǎn)播投產(chǎn)無(wú)IP', '點(diǎn)播待下架','點(diǎn)播上架完畢','點(diǎn)播故障','點(diǎn)播下架中'],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: '機(jī)器狀態(tài)',categories: ['視頻投產(chǎn)未使用', '視頻投產(chǎn)使用', '視頻投產(chǎn)無(wú)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:

/*** 獲取產(chǎn)品線下不同機(jī)器狀態(tài)的機(jī)器數(shù)量*/ @RequestMapping("/getMachineRateVOByProductline") @ResponseBody public List<MachineRateVO> getMachineRateVOByProductline(){List<MachineRateVO> machineRateVOs = platformMachineService.getMachineRateVOByProductline();return machineRateVOs; }Service:

/*** 獲取產(chǎn)品線下不同機(jī)器狀態(tài)的機(jī)器數(shù)量*/ @Override public List<MachineRateVO> getMachineRateVOByProductline() {List<MachineRateVO> machineRateVOs = new ArrayList<MachineRateVO>();//根據(jù)產(chǎn)品線統(tǒng)計(jì)機(jī)器占比(餅圖)List<Map<String, Integer>> productlineMaps = this.platformMachineMapper.getStaticMachineRateByProductLine();//循環(huán)每一條產(chǎn)品線 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;//投產(chǎn)int freeMachineCount = 0;//未使用int workMachineCount = 0;//使用int noIp = 0;//無(wú)ipMachineRateVO machineRateVO = new MachineRateVO();for(com.dnion.platform.dao.mybatis.entity.PlatformMachine platformMachine : platformMachines){if (platformMachine.getMcRunStatus().equals("OPERATION")) {//投產(chǎn) 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 則為空閑機(jī)器freeMachineCount += 1;}else {workMachineCount += 1;}}else {//無(wú)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:

/*** 產(chǎn)品線機(jī)器占比頁(yè)面視圖*/ public class MachineRateVO {/** 主要元素 下面的數(shù)量都是對(duì)應(yīng)于該產(chǎn)品線 */private String businessType;//產(chǎn)品線類型 主要元素 下面的數(shù)量都是對(duì)應(yīng)于該產(chǎn)品線private Integer allMachine;//產(chǎn)品線下的所有機(jī)器private Integer waitShelfCount;//待下架機(jī)器數(shù)量private Integer offShelfCount;//下架中機(jī)器數(shù)量private Integer onShelfCount;//上架完畢機(jī)器數(shù)量private Integer bugCount;//故障機(jī)器數(shù)量private Integer operationCount;//投產(chǎn)機(jī)器數(shù)量//freeMachineCount+workMachineCount=operationCountprivate Integer freeMachineCount;//未使用機(jī)器數(shù)量private Integer workMachineCount;//使用的機(jī)器數(shù)量private Integer noIp;//投產(chǎn)但無(wú)ippublic MachineRateVO(){}getter and setter... }

基本上就是以上代碼了,下面是效果圖:

總結(jié)

以上是生活随笔為你收集整理的Highcharts双饼图使用实例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。