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，一经查实，立即删除！

相关文章

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

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

总结一下自己使用 jackson 处理对象与 JSON 之间相互转换的心得。jackson 是一个用 Java 编写的&#xff0c;用来处理 JSON 格式数据的类库&#xff0c;它速度非常快&#xff0c;目前来看使用很广泛&#xff0c;逐渐替代了 Gson 和 json-lib 。 如果直接引入 jar 包&#xff0…
阅读更多...
使用Java的BlockingQueue实现生产者-消费者

使用Java的BlockingQueue实现生产者-消费者

BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具。 BlockingQueue有四个具体的实现类,根据不同需求,选择不同的实现类 1、ArrayBlockingQueue&#xff1a;一个由数组支持的有界阻塞队列&#xff0c;规定大小的BlockingQueue,其构造函数必须带一个int参数…
阅读更多...
循环删除List集合的错误

循环删除List集合的错误

症状:不是郝柱也能看到灾备分析:调试发现动作中有两个灾备,不过只过滤了其中一个 错误所在:代码如下,这里for循环删除List逻辑出问题了,犯了一个比较基础的错误 : 两个灾备动作索引是相邻的,当我remove掉第一个时紧跟着的动作就会取代它原来的位置,最终导致问题发生 修改方案:解…
阅读更多...
ajax中return取不到值的问题

ajax中return取不到值的问题

症状:机器迁移时判断JS返回取不到值分析 :调试发现data是有值的&#xff0c;而且下断点调试发现这段ajax还没走完&#xff0c;后面的逻辑已经开始走了错误所在:ajax之所以叫ajax它首先是异步的&#xff0c;顺序执行的程序不需要等待ajax跑完才继续执行 修改方案:将默认为true的…
阅读更多...
Websocket判断逻辑Bug

Websocket判断逻辑Bug

症状:灾备后台失败但前台提示成功分析 :下断点发现此时前端的data.obj为undifined&#xff0c;后台pyhon脚本执行报错了 错误所在:前台判断不应该加上undifined 修改方案:第一次修改如上&#xff0c;判断严谨多了&#xff0c;但是运行是前台报不能对undefined使用length分析 :…
阅读更多...
SpringMVC深度探险 —— SpringMVC核心配置文件详解

SpringMVC深度探险 —— SpringMVC核心配置文件详解

在上一篇文章中&#xff0c;我们从DispatcherServlet谈起&#xff0c;最终为读者详细分析了SpringMVC的初始化主线的全部过程。整个初始化主线的研究&#xff0c;其实始终围绕着DispatcherServlet、WebApplicationContext和组件这三大元素之间的关系展开。 在文章写完之后&…
阅读更多...
阿里RocketMQ Quick Start

阿里RocketMQ Quick Start

RocketMQ单机支持1万以上的持久化队列&#xff0c;前提是足够的内存、硬盘空间&#xff0c;过期数据数据删除&#xff08;RocketMQ中的消息队列长度不是无限的&#xff0c;只是足够大的内存数据定时删除&#xff09; RocketMQ版本&#xff1a;3.1.4 一&#xff0c;部署NameServ…
阅读更多...
Intellij Idea的使用之svn篇

Intellij Idea的使用之svn篇

记一下idea的svn使用有图超详细 根据在eclipse里使用svn的经验琢磨了一下idea,现把idea下svn的使用方法记录如下 主要分为几个功能来介绍 第一个功能当然是把远程的svn代码拉到我们本地 下面的多出了一个svn的窗口&#xff0c;在左边有加号可以添加一个svn的库 输入svn的地…
阅读更多...
Intellij IDEA 的使用

Intellij IDEA 的使用

前言&#xff1a; 为什么我要选择intellij idea呢&#xff1f;原因有三 1.以前公司的项目 在myeclipse10中不稳定 myeclipse说不定什么时候就崩溃卡死了 而intellij很稳定 2.界面高端洋气 用我朋友的话说 看着跟搞苹果开发一样 3.项目的支持上比较好 基本上web项目都可以导…
阅读更多...
Eclipse设置、调优、使用

Eclipse设置、调优、使用

eclipse调优一般在不对eclipse进行相关设置的时候&#xff0c;使用eclipse总是会觉得启动好慢&#xff0c;用起来好卡&#xff0c;其实只要对eclipse的相关参数进行一些配置&#xff0c;就会有很大的改善。 加快启动速度1.在eclipse启动的时候&#xff0c;它总是会搜索让其运行…
阅读更多...
Guava 实用操作集合

Guava 实用操作集合

guava 是 google 几个java核心类库的集合,包括集合、缓存、原生类型、并发、常用注解、基本字符串操作和I/O等等。 大家平时经常遇到某些相同的问题&#xff0c;自己写代码也都能解决。但是久而久之会感觉到很痛苦&#xff0c;因为我们一而再&#xff0c;再而三的重复发明轮子。…
阅读更多...
Intellj Idea 如何设置类头注释和方法注释

Intellj Idea 如何设置类头注释和方法注释

intellj idea 如何设置类头注释和方法注释intellj idea的强大之处就不多说了&#xff0c;相信每个用过它的人都会体会到&#xff0c;但是我们也会被他的复杂搞的晕头转向&#xff0c;尤其刚从eclipse转过来的童鞋&#xff0c;相信刚开始的那段经历都是不堪回首的&#xff0c;我…
阅读更多...
Logback介绍及入门

Logback介绍及入门

Logback简介 Logback是由log4j创始人设计的又一个开源日志组件。 logback当前分成三个模块&#xff1a;logback-core,logback- classic和logback-access。logback-core是其它两个模块的基础模块。logback-classic是log4j的一个 改良版本。此外logback-classic完整实现SLF4J API…
阅读更多...
数据库事务隔离级别

数据库事务隔离级别

数据库事务的隔离级别有4个&#xff0c;由低到高依次为Read uncommitted、Read committed、Repeatable read、Serializable&#xff0c;这四个级别可以逐个解决脏读、不可重复读、幻读这几类问题。 √: 可能出现 : 不会出现 脏读不可重复读幻读Read uncommitted√√√Read c…
阅读更多...
分布式服务框架Dubbo使用小结

分布式服务框架Dubbo使用小结

介绍&#xff1a; Dubbo是一个被国内很多互联网公司广泛使用的开源分布式服务框架&#xff0c;致力于提供高性能和透明化的RPC远程服务调用方案&#xff0c;以及SOA 服务治理方案&#xff0c;每天为2,000个服务提供3,000,000,000次访问量支持&#xff0c;并被广泛应用于阿里巴巴…
阅读更多...
XML解析-Dom4j的DOM解析方式更新XML

XML解析-Dom4j的DOM解析方式更新XML

Dom4j工具,是非官方的&#xff0c;不在jdk中。 使用步骤&#xff1a; 1&#xff09;导入dom4j的核心包。 dom4j-1.6.1.jar 2&#xff09;编写Dom4j读取xml文件的代码 1、更新XML 1.1、写出内容到xml文档 package com.rk.xml.g_dom4j_write;import java.io.File; import java.io…
阅读更多...
Qt前端技术：5.QSS

Qt前端技术：5.QSS

这个是表示QFrame中的pushButton中的子类和它子类的子类都将背景变为red 写成大于的时候表示只有直接的子类对象才会变 这个图中的QGroupBox和QPushButton都是QFrame的直接的子类 这个中的QGroupBox是QFrame的直接的子类但是QPushButton 是QGroupBox的子类&#xff0c;QPushB…
阅读更多...
Spring定时任务的几种实现

Spring定时任务的几种实现

近日项目开发中需要执行一些定时任务&#xff0c;比如需要在每天凌晨时候&#xff0c;分析一次前一天的日志信息&#xff0c;借此机会整理了一下定时任务的几种实现方式&#xff0c;由于项目采用spring框架&#xff0c;所以我都将结合 spring框架来介绍。 一&#xff0e;分类 从…
阅读更多...
解决quartz的job无法注入spring对象

解决quartz的job无法注入spring对象

一般情况下&#xff0c;quartz的job中使用autowired注解注入的对象为空&#xff0c;这时候我们就要使用spring-quartz提供的AdaptableJobFactory类。 自定义一个类: [java] view plaincopy public class JobFactory extends AdaptableJobFactory { Autowired …
阅读更多...
Activiti 基础概念

Activiti 基础概念

1、ProcessInstance 与ProcessDefinition 流程实例&#xff08;ProcessInstance&#xff09;和流程定义&#xff08;ProcessDefinition&#xff09;的关系&#xff0c;与类和实例对象的关系有点像&#xff0c;ProcessDefinition是整个流程步骤的说明而ProcessInstance就是指流程…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023