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

北京市博汇科技有限公司

利用Amcharts和Highcharts图形插件分别绘制CPU使用率效

果图对比分析

2013.09.12

第 1 页共42 页

修改记录

第 2 页共42 页

一、前言

我们公司在开发前端页面的过程中需要大量使用静态或者动态的图形报表。利用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。

第 3 页共42 页

在eclipse中新建一个动态web项目。新建两个jsp文件，分别为amcharts.jsp和highcharts.jsp，在amcharts.jsp 中引入Amcharts依赖文件：

这里的第1）个文件是Amcharts的样式文件，第2）个文件是Amcharts的核心js库，第3）个文件其实并不是Amcharts 必须的，之所以引入是因为需要利用jquery达到异步请求功能，同时需要将上面三个文件放到指定的目录。

在highcharts.jsp中引入依赖文件：

这里的第1）个jquery插件版本必须高于1.5.x,否则可能不兼容，这是Highcharts必须要依赖的。第2）个文件时highcharts的核心js库，可以绘制常用的线性图和区域图，第3）个文件是用于导出图表的插件，是highcharts自带的一个插件。第4）个文件是highcharts提供的拓展js库，用户绘制一些特殊图形，比如在本次测试中利用该插件绘制了类似于汽车仪表盘的图表，用来显示CPU和内存的实时运行状态。

第 4 页共42 页

利用java获取操作系统的CPU和内存的使用状态并不是此次要演示的重点内容，因此在此只简单介绍。

JDK提供的ng.management.ManagementFactory（1.5版本以上才有）和sun公司提供的com.sun.management.OperatingSystemMXBean类，其实都在jdk中。

获取操作系统内存信息：

有了总物理内存跟剩余内存，那么计算内存使用率就不用再多说了吧，关键是下一个，获取CPU使用率。很遗憾的是jdk并没有直接提供获取操作系统CPU信息的接口，因此只能通过操作系统本地平台的命令来间接获取。这里只列出获取windows平台的CPU信息。

第 5 页共42 页

第 6 页共42 页

第7 页共42 页

第8 页共42 页

第 9 页 共 42 页

将上面的获取信息功能封装成

MonitorService 类，将CPU 和内存信息封装到MonitorBean 对象，然后写一个servlet 服务程序。程序的核心代码：

三、前台页面

1、效果预览

1）Amcharts图表预览

图3-1可以分为两部分，其实是由两个图表拼接在一起的。上半部分是记录了CPU和内存在最近90秒的历史记录，并持续每秒步进一次。下半部分用了Amcharts的3D柱状图的高低来代表使用率，每秒跳动一次。

第10 页共42 页

第11 页共42 页

图3-1 Amcharts绘制CPU/内存使用率实时状态截图

2）Highcharts图表预览

图3-4也是由上下两张图拼接而成。上半部分记录了最近200秒的CPU和内存使用情况，下半部分则是实时状态，上半部分每一秒步进一次，下半部分0.5秒跳动一次，由于这两张图的刷新时间不一致，因此highcharts.jsp 中分别为每个图表分配了定时器和ajax函数。

第12 页共42 页

第13 页共42 页

图3-2 HighCharts绘制CPU/内存使用率实时状态图2、javascript代码详解

1）amcharts.jsp

在中置入两个div，Amcharts和Highcharts就是将图表放在div中的。

在中编写javascript代码。

第14 页共42 页

第15 页共42 页

第16 页共42 页

第17 页共42 页

第18 页共42 页

第19 页共42 页

第20 页共42 页

第21 页共42 页

2) highcharts.jsp

在页面引入两个div。第一个用户绘制普通的走势图，第二个用于绘制仪表盘图

关于Highcharts的API和相关学习资料相当的多，而Amcharts javascript版本的由于是新推出的，因此学习资料和文档不是很多。因此在此对Highcharts 的javascript代码作简要分析。

第22 页共42 页

第23 页共42 页

第24 页共42 页

第25 页共42 页

第26 页共42 页

第27 页共42 页