项目上要用到Hightcharts展示平台机器占用情况,使用这类第三方插件很方便就能实现

JSP:

<script type="text/javascript" src="<%=basePath%>/resources/thirdparty/highcharts/highcharts.js"></script>
<div id="machineRate" title="按产品线统计机器占比" style="display:inline; width:50%;float: left"></div>

JS:
/**查看机器占比(按产品线) fangguitang@dnion.com 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: '按产品线统计机器占比'},//当鼠标经过时的提示设置tooltip: {pointFormat: '{series.name}: <b>{point.percentage}%</b>',percentageDecimals: 1},//每种图表类型属性设置plotOptions: {//饼状图pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,color: '#000000',connectorColor: '#000000',formatter: function() {//Highcharts.numberFormat(this.percentage,2)格式化数字,保留2位精度return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';}}}},//图表要展现的数据series: [{type: 'pie',name: '机器占比'}]});});$.ajax({type : "GET",url : "machine/getStaticMachineRateByProductLine",success : function(data){//定义一个数组browsers = [],//迭代,把异步获取的数据放到数组中$.each(data,function(i,d){var str = "";switch (d.businessType) {case "BUSINESS_WEB":str = "网页";break;case "BUSINESS_DOWNLOAD":str = "下载";break;case "BUSINESS_PLAY":str = "点播";break;case "BUSINESS_VIDEO":str = "视频";break;case "BUSINESS_STREAMING":str="流媒体";break;case undefined:str="其他";break;default:break;}browsers.push([str,d.machineCount]);});//设置数据chart.series[0].setData(browsers);  },error : function(e){/*alert(e);*/}});
}

Controller:

/*** 根据产品线统计机器的占比(饼图)*/
@RequestMapping("/getStaticMachineRateByProductLine")
@ResponseBody
public List<Map<String, Integer>> getStaticMachineRateByProductLine(){List<Map<String, Integer>> machines =  platformMachineService.getStaticMachineRateByProductLine();return machines;
}

Service:

/** 根据产品线统计机器占比(饼图)*/
@Override
public List<Map<String, Integer>> getStaticMachineRateByProductLine() {return this.platformMachineMapper.getStaticMachineRateByProductLine();
}

Mapper:

/** 根据产品线统计机器占比*/
public List<Map<String, Integer>> getStaticMachineRateByProductLine();

XML:

<!-- 根据产品线查看机器占比 -->
<select id="getStaticMachineRateByProductLine" resultType="Map">SELECT pi.pl_business_type AS businessType,COUNT(mc_id) AS machineCountFROM platform_machine pmLEFT JOIN platform_info pi ON pi.pl_name_en = pm.current_platformGROUP BY pi.pl_business_type ORDER BY machineCount DESC
</select>

Highcharts+Spring饼图使用实例相关推荐

  1. Highcharts双饼图使用实例

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

  2. html5饼图颜色渐变,Highcharts 渐变饼图

    Highcharts 渐变饼图 以下实例演示了渐变饼图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置. 配置 colors 配置 使用 Highcha ...

  3. Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法

    Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法 参考文章: (1)Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法 (2)ht ...

  4. 【Python】用 Highcharts 绘制饼图,也很强大

    来源:Python数据之道 作者:Peter 整理:阳哥 用 Highcharts 绘制饼图,也很强大 前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 Jav ...

  5. 肝!用 Highcharts 绘制饼图,也很强大

    来源 / Python数据之道 作者/Peter   整理/阳哥 用 Highcharts 绘制饼图,也很强大 前不久,分享了读者投稿的文章,较为综合的介绍了可视化库 Highcharts ,这个一个 ...

  6. Spring Boot(四)Spring Boot @ConfigurationProperties实例

    Spring Boot @ConfigurationProperties实例 一 . ConfigurationProperties的使用 通常,我们使用@Value注释来逐个注入.propertie ...

  7. Spring+ehcache缓存实例

    一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的CacheProvider.Ehcache是一种广泛使用的开源Java分布式 ...

  8. Spring+EhCache缓存实例(详细讲解+源码下载)

    转载注明出处http://blog.csdn.net/u013142781 一.ehcahe的介绍 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点,是Hibernate中默认的 ...

  9. Spring 的持久化实例(JDBC, JdbcTemplate、HibernateDaoSupport、JdbcDaoSupport、SqlSessionDaoSupport等)...

    2019独角兽企业重金招聘Python工程师标准>>> 一.表(这里用mysql,数据库名为yiibai) CREATE TABLE `customer` (`CUST_ID` in ...

最新文章

  1. python之运算符
  2. C语言试题二十之利用以下的简单迭代方法求方程cos(x)-x=0的一个实根。
  3. 从RedisTemplate中获得Jedis实例
  4. C#的引用类型有四种类、代表、数组、接口
  5. 交叉编译JRTPLib库
  6. 微信小程序input禁止输入特殊符号
  7. elasticsearch实现搜索拼音然后高亮内容
  8. 第二章 爬取案例-链家租房数据获取 2021-09-16
  9. 【白帽子学习笔记】CTF实践
  10. php手机界面设计,浅析手机界面设计
  11. 华为摄像头采集自动聚焦崩溃
  12. Android 无标题 全屏设置
  13. KBEngine warring项目源码阅读(三) 实体文件与Account处理
  14. 码元携带多少比特信息?波特率和比特率的关系?
  15. 测试基础知识DAY02
  16. 解决高并发中出现Too many open files问题
  17. 基于Springboot实现在线打印平台
  18. 国外经典网页设计:50个优秀的移动网站设计实例
  19. 视频教程-清华-尹成老师-java基础-Day8-Java
  20. 超简单的统计结果可视化工具,推荐~~

热门文章

  1. 离散数学和组合数学什么关系_关系类型| 离散数学
  2. JavaScript中带有示例的Math.max()方法
  3. Python | 从用户输入数据,保存到文件,读取并打印
  4. java jpa_Java JPA 语法知识
  5. lvs负载均衡—ldirectord(DR模式的健康检查)
  6. flex 修改生成html,CSS Flex –动画教程
  7. python计算结果传给spark_Spark入门:流计算简介(Python版)
  8. mis dss gis_MIS中的决策支持系统(DSS)
  9. 第 3-4 课:数据结构——队列详解 + 面试题
  10. JSP JAVA 自定义 错误页面(404,505,500)