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...
}

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




本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/553818.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

火狐浏览器如何更改字体 火狐浏览器字体更改方法分享

火狐浏览器如何更改字体 火狐浏览器字体更改方法分享

中文俗称“火狐”的Mozilla Firefox&#xff0c;不仅是一款自由及开放源代码的网页浏览器&#xff0c;其在国内也不乏拥趸。当然&#xff0c;想要熟练使用火狐浏览器&#xff0c;还需要一定的经验和技巧!那么&#xff0c;在火狐浏览器中该如何更改字体呢?下面就让我们来了解一…
阅读更多...
一个API接口的例子,包括单元测试

一个API接口的例子,包括单元测试

功能大体需求是通过平台获取该平台的所有节点(节点按省,运营商分组)以及节点的所有IP信息(地址和层级),表关系比较复杂,搞了两天才好,是自己一开始搞复杂了。 VO:存放所需元素实体类 public class PlatformIpVO implements Serializable {private String province;private Str…
阅读更多...
SpringMVC+uploadify文件上传

SpringMVC+uploadify文件上传

前言 准备筹划一个自己的个人网站&#xff0c;初步的架构设计采用SSH&#xff08;Spring-MVC&#xff0c;Spring&#xff0c;Hibernate&#xff09;&#xff0c;在这里 顺便记录一下设计和开发过程&#xff0c;以备参考。后续会陆续更新文档&#xff0c;如有任何问题&#xff0…
阅读更多...
谷歌浏览器怎么更新升级 谷歌浏览器手动更新方法

谷歌浏览器怎么更新升级 谷歌浏览器手动更新方法

谷歌浏览器怎么更新升级?作为走在网页浏览器行业最前端的浏览器&#xff0c;谷歌相当受欢迎。浏览器的升级是为了修复漏洞和完善浏览器的功能&#xff0c;但有时候浏览器本身并不会自动升级&#xff0c;当你的电脑管家也没有提醒你软件升级的时候&#xff0c;我们如何手动给谷…
阅读更多...
Easyui动态加载后台数据的例子

Easyui动态加载后台数据的例子

JS: /**接口验证查询按钮*/ function strategyCheckSearch(){var strategyRows $("#strategyCheckDg").datagrid(getRows);var strategyIp $("#strategyIp").val().trim();var strategyPort $("#strategyPort").val().trim();if(strategyIp.le…
阅读更多...
火狐怎么在线升级 火狐浏览器在线升级方法分享

火狐怎么在线升级 火狐浏览器在线升级方法分享

想要尝试最新版本的火狐浏览器&#xff0c;不仅可以前往火狐官网下载最新版本的客户端&#xff0c;还可以将现有的版本进行升级。那么&#xff0c;火狐该怎么在线升级呢?下面小编就来分享一下火狐浏览器在线升级的方法&#xff0c;不清楚具体操作的朋友可以稍作参考。 方法步…
阅读更多...
win7系统任务管理器如何强制关闭程序

win7系统任务管理器如何强制关闭程序

win7系统是一款大家用了都说好的系统&#xff0c;最近一直有很多的小伙伴们反应不知道win7任务管理器如何强制关闭程序?今天小编就为大家带来了win7系统任务管理器强制关闭程序的方法&#xff0c;让我们一起来看看吧。 win7系统任务管理器如何强制关闭程序&#xff1a; 1、按…
阅读更多...
jquery获取checkbox是否选中

jquery获取checkbox是否选中

$(#checkbox).attr(checked); 返回的是checked或者是undefined&#xff0c;不是原来的true和false了&#xff0c;有关此问题的解决方法如下: <input typecheckbox idcb/> <script> //获取是否选中 var isChecked $(#cb).prop(checked); //或 var isChecked …
阅读更多...
win7让任务管理器pid显示出来的方法

win7让任务管理器pid显示出来的方法

win7怎么让任务管理器pid显示出来?win7系统是一款优秀的电脑系统。各种各样的设置都可以帮助用户们更好的使用win7系统&#xff0c;今天小编为大家带来的就是win7任务管理器pid显示出来的设置方法一起来看看吧。 win7让任务管理器pid显示出来的方法&#xff1a; 1、鼠标右键…
阅读更多...
stream+springmvc实现文件断点续传

stream+springmvc实现文件断点续传

手上有个文件上传的需求&#xff0c;并且要支持断点续传最好要兼容性好一些&#xff0c;之前用过uploadify这个jquery上传插件&#xff0c;但是首先它不支持断点续传而且HTML5版本的竟然要收费&#xff0c;秉承中国特色这里就不予考虑了&#xff1b;于是在网上找到了一个叫 Str…
阅读更多...
UC浏览器怎么删除收藏历史？UC浏览器删除收藏历史的操作方法

UC浏览器怎么删除收藏历史？UC浏览器删除收藏历史的操作方法

uc浏览器怎么删除收藏历史?在使用的一个uc浏览器中&#xff0c;就会对浏览器中做删除收藏操作&#xff0c;小编告诉大家怎么删除收藏历史?在使用浏览器的时候&#xff0c;当时搜索的时候&#xff0c;也是是当时需要的&#xff0c;之后就不需要了&#xff0c;那么这个时候就可…
阅读更多...
spring注解（ @Autowired、@Qualifier、@Resource、@PostConstruct、@PreDestroy、 @Component、@Scope）-描述的比较清楚

spring注解（ @Autowired、@Qualifier、@Resource、@PostConstruct、@PreDestroy、 @Component、@Scope）-描述的比较清楚

概述&#xff1a;注释配置相对于 XML 配置具有很多的优势&#xff1a; 它可以充分利用 Java 的反射机制获取类结构信息&#xff0c;这些信息可以有效减少配置的工作。如使用 JPA 注释配置 ORM 映射时&#xff0c;我们就不需要指定 PO 的属性名、类型等信息&#xff0c;如果关系…
阅读更多...
傲游浏览器能改字体吗 网页字体设置方法简述

傲游浏览器能改字体吗 网页字体设置方法简述

将网页字体调整为喜欢的格式&#xff0c;在一定程度上也能提高用户的使用体验&#xff0c;因此傲游浏览器推出了个性化的“网页字体更改”功能。那么&#xff0c;该如何使用这一功能呢?下面小编就来简单介绍一下傲游浏览器网页字体的设置方法&#xff0c;感兴趣的朋友不妨多多…
阅读更多...
QQ浏览器如何开启夜间模式 夜间模式使用技巧分享

QQ浏览器如何开启夜间模式 夜间模式使用技巧分享

在夜晚长时间且高亮度的使用了QQ浏览器后&#xff0c;眼睛不免会觉得干涩。而开启QQ浏览器中的黑暗模式&#xff0c;则可以在一定程度上缓解这一问题!那么&#xff0c;QQ浏览器要如何开启夜间模式呢?下面小编就来分享一下QQ浏览器夜间模式的使用技巧&#xff0c;感兴趣的朋友不…
阅读更多...
使用jackson对Java对象与JSON字符串相互转换的一些总结

使用jackson对Java对象与JSON字符串相互转换的一些总结

总结一下自己使用 jackson 处理对象与 JSON 之间相互转换的心得。jackson 是一个用 Java 编写的&#xff0c;用来处理 JSON 格式数据的类库&#xff0c;它速度非常快&#xff0c;目前来看使用很广泛&#xff0c;逐渐替代了 Gson 和 json-lib 。 如果直接引入 jar 包&#xff0…
阅读更多...
火狐怎么放大页面？火狐浏览器页面放大技巧

火狐怎么放大页面？火狐浏览器页面放大技巧

和许多浏览器产品一样&#xff0c;火狐浏览器也支持用户对当前页面进行缩放。当然&#xff0c;不同浏览器产品&#xff0c;页面缩放功能隐藏的位置也各不相同!那么&#xff0c;火狐怎么放大页面呢?下面是小编分享的火狐浏览器页面放大技巧&#xff0c;感兴趣的朋友可不要错过了…
阅读更多...
JSON和JS对象之间的互转

JSON和JS对象之间的互转

1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的转换方式(Firefox&#xff0c;chrome&#xff0c;opera&#xff0c;safari&#xff0c;ie9&#xff0c;ie8)等浏览器&#xff1a; JSON.pa…
阅读更多...
森林中的三个小矮人

森林中的三个小矮人

今天七小编分享经典童话故事《森林中的三个小矮人》&#xff0c;故事中两个小姑娘&#xff0c;一位心地善良&#xff0c;说话会吐出金子;一位丑陋坏心&#xff0c;说话会吐出蛤蟆;来看看怎么回事吧! 从前&#xff0c;一位死了妻子的男人和一位死了丈夫的女人结了婚&#xff0c…
阅读更多...
转码与重定向的区别之于SpringMVC

转码与重定向的区别之于SpringMVC

使用转发时&#xff0c;JSP容器将使用一个内部的方法来调用目标页面&#xff0c;新的页面继续处理同一个请求&#xff0c;而浏览器将不会知道这个过程。 与之相反&#xff0c;重定向方式的含义是第一个页面通知浏览器发送一个新的页面请求。因此转发要比重定向更快,而且跳转到的…
阅读更多...
Spring的ApplicationEvent的使用

Spring的ApplicationEvent的使用

Spring的ApplicationEvent的使用 Spring 3.0中提供了很多类似*Aware的类&#xff0c;其中ApplicationContextAware接口可以实现我们在初始化bean的时候给bean注入ApplicationConxt&#xff08;Spring上下文对象&#xff09;对象。ApplicationContextAware接口提供了publishEven…
阅读更多...
最新文章

Copyright @ 2022~2023