利用Amcharts和Highcharts绘制CPU使用率效果图对比.docVIP

北京市博汇科技有限公司 利用Amcharts和Highcharts图形插件分别绘制CPU使用率效果图对比分析 2013.09.12 修改记录 序号 日期 作者 修改记录 评审 1 2013-09-12 王震阳 创建 一、前言 我们公司在开发前端页面的过程中需要大量使用静态或者动态的图形报表。利用flash和flex等技术可以实现丰富的图表功能，但是这些插件的致命之处是通用性较差，而纯javascript实现的图形插件的通用性是最好的，只要浏览器兼容javascript那就兼容该插件，与平台和开发环境没有关系，Amcharts 和Highcharts是两个非常有名的Javascript图形插件可以帮助我们解决以上问题。自己分别用这两个插件制作了CPU和内存使用率的动态图表，以此来对比分析这两个插件的优缺点。 搭配开发环境 本次测试使用的开发工具是eclipse 4.3.0版本，开发语言是Java，由servlet程序为图表提供数据，前台只需要利用ajax请求servlet即可获取到CPU和内存使用率数据。使用的Amcharts 是Javascript版本的（Amcharts有flash和javascript版本之分），版本号是2.11.2，使用的Highcharts版本号是3.0.3。 在eclipse中新建一个动态web项目。新建两个jsp文件，分别为amcharts.jsp和highcharts.jsp，在amcharts.jsp中引入Amcharts依赖文件： 1） link rel=stylesheet href=style.css type=text/css 2） script src=amcharts/amcharts.js type=text/javascript/script 3） script src=amcharts/jquery.js type=text/javascript/script 这里的第1）个文件是Amcharts的样式文件，第2）个文件是Amcharts的核心js库，第3）个文件其实并不是Amcharts必须的，之所以引入是因为需要利用jquery达到异步请求功能，同时需要将上面三个文件放到指定的目录。 在highcharts.jsp中引入依赖文件： 1） script src=highcharts/jquery-1.9.0.min.js type=text/javascript/script 2） script src=highcharts/highcharts.js/script 3） script src=highcharts/modules/exporting.js/script 4） script src=highcharts/highcharts-more.js/script 这里的第1）个jquery插件版本必须高于1.5.x,否则可能不兼容，这是Highcharts必须要依赖的。第2）个文件时highcharts的核心js库，可以绘制常用的线性图和区域图，第3）个文件是用于导出图表的插件，是highcharts自带的一个插件。第4）个文件是highcharts提供的拓展js库，用户绘制一些特殊图形，比如在本次测试中利用该插件绘制了类似于汽车仪表盘的图表，用来显示CPU和内存的实时运行状态。 利用java获取操作系统的CPU和内存的使用状态并不是此次要演示的重点内容，因此在此只简单介绍。 JDK提供的java.lang.management.ManagementFactory（1.5版本以上才有）和sun公司提供的com.sun.management.OperatingSystemMXBean类，其实都在jdk中。 获取操作系统内存信息： // 总的物理内存 单位均为byte long totalMemorySize = osmxb.getTotalPhysicalMemorySize(); // 剩余的物理内存 long freePhysicalMemorySize = osmxb.getFreePhysicalMemorySize(); 有了总物理内存跟剩余内存，那么计算内存使用率就不用再多说了吧，关键是下一个，获取CPU使用率。很遗憾的是jdk并没有直接提供获取操作系统CPU信息的接口，因此只能通过操作系统本地平台的命令来间接获取。这里只列出获取windows平台的CPU信息。 private double getCpuRatioFo