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

《利用Amcharts和Highcharts绘制CPU使用率效果图对比》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd北京市博汇科技有限公司利用Amcharts和Highcharts图形插件分别绘制CPU使用率效果图对比分析2013.09.12第42页共42页北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd修改记录序号日期作者修改记录评审12013-09-12王震阳创建第42页共42页北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd一、前言我们公司在开发前端页面的过程中需要大量使用静态或者动态的图形报表。利用flash和flex

2、等技术可以实现丰富的图表功能，但是这些插件的致命之处是通用性较差，而纯javascript实现的图形插件的通用性是最好的，只要浏览器兼容javascript那就兼容该插件，与平台和开发环境没有关系，Amcharts和Highcharts是两个非常有名的Javascript图形插件可以帮助我们解决以上问题。自己分别用这两个插件制作了CPU和内存使用率的动态图表，以此来对比分析这两个插件的优缺点。二、搭配开发环境本次测试使用的开发工具是eclipse4.3.0版本，开发语言是Java，由servlet程序为图表提供数据，前台只需要利用ajax请求servlet即可获取到CPU和内存

3、使用率数据。使用的Amcharts是Javascript版本的（Amcharts有flash和javascript版本之分），版本号是2.11.2，使用的Highcharts版本号是3.0.3。第42页共42页北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd在eclipse中新建一个动态web项目。新建两个jsp文件，分别为amcharts.jsp和highcharts.jsp，在amcharts.jsp中引入Amcharts依赖文件：1）

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

5、harts/jquery-1.9.0.min.js"type="text/javascript">2）3）4）这里的第1）个jquery插件版本必须高于1.5.x,否则可能不兼容，这是Highcharts必须要依赖的。第2）个文件时highcharts的核心j

6、s库，可以绘制常用的线性图和区域图，第3）个文件是用于导出图表的插件，是highcharts自带的一个插件。第4）个文件是highcharts提供的拓展js库，用户绘制一些特殊图形，比如在本次测试中利用该插件绘制了类似于汽车仪表盘的图表，用来显示CPU和内存的实时运行状态。第42页共42页北京市博汇科技有限公司BroadwayScience&TechnologyCo.,Ltd利用java获取操作系统的CPU和内存的使用状态并不是此次要演示的重点内容，因此在此只简单介绍。JDK提供的java.lang.management.ManagementFactory（1.5版本以上才有）

7、和sun公司提供的com.sun.management.OperatingSystemMXBean类，其实都在jdk中。获取操作系统内存信息：//总的物理内存单位均为bytelongtotalMemorySize=osmxb.getTotalPhysicalMemorySize();//剩余的物理内存longfreePhysicalMemorySize=osmxb.getFreePhysicalMemorySize();有了总物理内存跟剩余内存，那么计算内存使用率就不用再多说了吧，关键是下一