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

北京市博汇科技有限公司Broadway Science & Technology Co., Ltd北京市博汇科技有限公司利用Amcharts和Highcharts图形插件分别绘制CPU使用率效果图对比分析2013.09.12修改记录序号日期作者修改记录评审12013-09-12王震阳创建一、前言我们公司在开发前端页面的过程中需要大量使用静态或者动态的图形报表。利用flash和flex等技术可以实现丰富的图表功能，但是这些插件的致命之处是通用性较差，而纯javascript实现的图形插件的通用性是最好的，只要浏览器兼容javascript那就兼容该插件，与平台和开发环境没有关系，Amcharts 和Highcharts是两个非常有名的Javascript图形插件可以帮助我们解决以上问题。自己分别用这两个插件制作了CPU和内存使用率的动态图表，以此来对比分析这两个插件的优缺点。2、 搭配开发环境本次测试使用的开发工具是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） 2） 3） 这里的第1）个文件是Amcharts的样式文件，第2）个文件是Amcharts的核心js库，第3）个文件其实并不是Amcharts必须的，之所以引入是因为需要利用jquery达到异步请求功能，同时需要将上面三个文件放到指定的目录。在highcharts.jsp中引入依赖文件： 1） 2） 3） 4） 这里的第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 getCpuRatioForWindows() try String procCmd = System.getenv(windir) + system32wbemwmic.exe process get Caption,CommandLine, + KernelModeTime,ReadOperationCount,ThreadCount,UserModeTime,WriteOperationCount; / 获取进程信息 long c0 = readCpu(Runtime.getRuntime().exec(procCmd); Thread.sleep(30); long c1 = readCpu(Runtime.getRuntime().exec(procCmd); if (c0 != null & c1 != null) long idletime = c10 - c00; long busytime = c11 - c01; return Double.valueOf( 100* (busytime) / (busytime + idletime) .doubleValue(); else return 0.0; catch (Exception ex) ex.printStackTrace(); return 0.0; private long readCpu(final Process proc) long retn = new long2; try proc.getOutputStream().close(); InputStreamReader ir = new InputStreamReader(proc.getInputStream(); LineNumberReader input = new LineNumberReader(ir); String line = input.readLine(); if (line = null | line.length() 10) return null; int capidx = line.indexOf(Caption); int cmdidx = line.indexOf(CommandLine); int rocidx = line.indexOf(ReadOperationCount); int umtidx = line.indexOf(UserModeTime); int kmtidx = line.indexOf(KernelModeTime); int wocidx = line.indexOf(WriteOperationCount); long idletime = 0; long kneltime = 0; long usertime = 0; while (line = input.readLine() != null) if (line.length() = 0) continue; if (caption.equals(System Idle Process) | caption.equals(System) idletime += Long.valueOf( Bytes.substring(line, kmtidx, rocidx - 1).trim() .longValue(); idletime += Long.valueOf( Bytes.substring(line, umtidx, wocidx - 1).trim() .longValue(); continue; kneltime += Long.valueOf( Bytes.substring(line, kmtidx, rocidx - 1).trim() .longValue(); usertime += Long.valueOf( Bytes.substring(line, umtidx, wocidx - 1).trim() .longValue(); retn0 = idletime; retn1 = kneltime + usertime; return retn; catch (Exception ex) ex.printStackTrace(); finally try proc.getInputStream().close(); catch (Exception e) e.printStackTrace(); return null; class Bytes public static String substring(String src, int start_idx, int end_idx) byte b = src.getBytes(); String tgt = ; for(int i=start_idx; i=end_idx; i+) tgt +=(char)bi; return tgt; 将上面的获取信息功能封装成MonitorService类，将CPU和内存信息封装到MonitorBean对象，然后写一个servlet服务程序。程序的核心代码：protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException MonitorInfoBean infoBean = null;try infoBean = monitorService.getMonitorInfoBean(); catch (Exception e) e.printStackTrace();/操作系统总物理内存大小Long totalMemorySize = infoBean.getTotalMemorySize();/操作系统已经使用内存大小Long usedMemory = infoBean.getUsedMemory();/操作系统内存使用率String memoryRate = (int)(usedMemory+0.)/totalMemorySize)*10000)/100)+;/操作系统的cpu使用率String cpuRate = (int)infoBean.getCpuRatio()+;String result = memoryRate+_+cpuRate;System.out.println(result); /将内存信息和CPU信息作为字符串返回给请求者response.getWriter().write(result);3、 前台页面1、 效果预览1） Amcharts图表预览图3-1可以分为两部分，其实是由两个图表拼接在一起的。上半部分是记录了CPU和内存在最近90秒的历史记录，并持续每秒步进一次。下半部分用了Amcharts的3D柱状图的高低来代表使用率，每秒跳动一次。图3-1 Amcharts绘制CPU/内存使用率实时状态截图2） Highcharts图表预览图3-4也是由上下两张图拼接而成。上半部分记录了最近200秒的CPU和内存使用情况，下半部分则是实时状态，上半部分每一秒步进一次，下半部分0.5秒跳动一次，由于这两张图的刷新时间不一致，因此highcharts.jsp中分别为每个图表分配了定时器和ajax函数。图3-2 HighCharts绘制CPU/内存使用率实时状态图2、 javascript代码详解 1）amcharts.jsp在中置入两个div，Amcharts和Highcharts就是将图表放在div中的。 在中编写javascript代码。 var chartData = ;/声明一个数组，用于存放图表的坐标 var chartData2= ;var k=0; /该函数用于绘制图3-1中的上半个图function show() var chart = new AmCharts.AmSerialChart();/声明amcharts的核心对象 var valueAxis = new AmCharts.ValueAxis();/Y轴对象 var graph1 = new AmCharts.AmGraph();/图像对象，指图表上的折线或者区域等，这里代表内存使用率折线 var graph2 = new AmCharts.AmGraph();/这里代表CPU使用率的区域面积 var categoryAxis = chart.categoryAxis;/直译是分类轴，这里可以理解成X轴对象 var guide = new AmCharts.Guide();/向导，直接听名字很难理解，其实可以是一条垂直于X轴的标记线或者带状区域，或者是垂直于Y轴的标记线或者带状区域，比如我们鼠标放在图表中的某个位置时，会看到一条垂直X轴的线条，如果这个线条是画上去的静态的那么就是guide了。 var legend = new AmCharts.AmLegend();/图例，一个chart只能有一个legend，但是一个legend可以有多个图标 var chartCursor = new AmCharts.ChartCursor();/鼠标形状，不仅提供了鼠标形状功能，还对应着鼠标可以执行的操作 chart.pathToImages = amcharts/images/;/为chart指定一个引用的图片资源路径 chart.zoomOutButton = backgroundColor: #000000, backgroundAlpha: 0.15 ;/设置chart的放缩按钮样式，默认情况下，按住鼠标左键滑动鼠标可以放大图像，这时在右上角会有缩小按钮。 chart.dataProvider = chartData;/给chart指定一个数组作为数据来源 chart.categoryField = date;/给chart指定“date”字段作为X轴 categoryAxis.parseDates = false; /是否解析指定的X轴字段为日期，X轴可以是日期格式也可以是其他，因此在此次测试中，对日期没有要求，因此设置为false categoryAxis.dashLength = 0;/用于设置破折线每一段的长度，默认为0，是实心线 categoryAxis.gridAlpha = 0.5;/垂直于X轴形成的网格的透明度，最小值0为不显示，最大值1为全显示 categoryAxis.axisColor = #DADADA;/设置X轴的颜色 / categoryAxis.position = top;/设置X轴的位置，可以在上或者下，默认在下方 categoryAxis.gridPosition = start;/设置垂直于X轴的网格的开始位置 categoryAxis.startOnAxis = false;/是否将起始绘制点在X轴上开始，默认为false，第一个点从中间开始绘制，如果设置为true，则第一个点位于第一个X轴上。 categoryAxis.gridColor = #00FF00;/设置网格颜色 chartCursor.zoomable = false; / 是否开启缩放功能 chartCursor.cursorAlpha = 0.3;/设置光标形状的透明度 chartCursor.cursorPosition = mouse;/设置光标的位置，设置成mouse则，光标就在鼠标的真实位置上 chart.addChartCursor(chartCursor);/将设置好的光标对象添加到chart对象中 valueAxis1.axisColor = #FF6600;/Y 轴的颜色 valueAxis1.axisThickness = 1;/Y轴的刻度线的宽度 valueAxis1.gridAlpha = 0;/Y轴网的透明度 valueAxis1.tickLength =0;/Y轴刻度线的长度 valueAxis1.minimum = 0;/设置Y轴的最小值和最大值，如果不设置，那么chart会自动调整 valueAxis1.maximum = 100; valueAxis1.title=物理内存/CPU使用率;/Y轴名称 valueAegersOnly = false;/Y轴刻度是否只显示整数类型 valueAxis1.gridCount = 10;/Y轴刻度个数 valueAxis1.unit = %;/Y轴单位 valueAxis1.labelsEnabled = true;/Y轴的标签是否显示，默认为true，如果设置为false，则Y轴只显示刻度值，其他都不显示 valueAxis1.inside = false;/Y 轴的位置，默认false在图表的外围，如果设置成true则在图表的内侧 valueAxis1.position = left;/Y 轴的位置，可以在左侧也可以在right chart.addValueAxis(valueAxis1);/将设置好属性的Y轴添加到chart对象上，一个对象可以有多个Y轴 legend.align = center;/设置图例的横向布局方式 legend.title=图例;/设置图例的名称 legend.horizontalGap = 10;/设置水平间隔 legend.equalWidths = false; legend.valueWidth = 120;/设置图例显示数值时该数值的大小，当鼠标放在图上某个位置时，对应的图例右侧会显示当前鼠标选中点的数值大小 legend.color=FFFFFF;/设置图例颜色 chart.addLegend(legend);/将图例添加为chart的属性 guide.lineColor = #00FF00;/设置向导线的颜色 guide.lineAlpha = 0.5;/透明度 guide.value=0;/其实值 guide.toValue=10;/目标值，这两个数值，构成了一个区域，该区域从Y轴的0刻度开始到刻度为10位置结束 guide.dashLength = 2;/可以将向导线设置成破折线 guide.inside = true;/向导线位 valueAxis1.addGuide(guide);/给Y轴添加向导线属性，一个Y轴或者X轴可以设置多个向导线 graph1.valueAxis = valueAxis1; / 指定图形1即内存使用率图使用的Y轴为valueAxis1 graph2.valueAxis = valueAxis1; /因为这里连个graph一个线状的一个区域状的都使用百分比作为单位，所以就可以使用同一个Y轴 graph1.title = 内存使用率; graph2.title = CPU使用率; graph1.valueField = memoryRate;/指定一个字段作为graph1的数值 graph2.valueField = cpuRate; graph1.bullet = round;/bullet是当鼠标放到图像上时，被选中的点高亮显示区域，这里是设置其形状为圆形 graph1.hideBulletsCount = 10;/设置最多一个图表中显示多少个bullet，如果bullet过多则会不美观 graph1.lineColor = #d1655d;/设置图像的线条颜色 graph2.lineColor = #00FF00; graph1.bulletBorderColor = #FFFFFF;/设置bullet的边框颜色 graph1.bulletBorderThickness = 2; /设置bullet边框宽度 graph.bulletSize = 14; /设置bullet的大小 / graph1.colorField = color;/用户可以自定义bullet的颜色，颜色值放在chartData数组中 graph1.type = line; / 设置图形类型，如果是条状图则设置为column graph2.type = line; / chart.addGraph(graph1);/给chart添加graph属性，一个chart可以有多个 chart.addGraph(graph2); chart.addTitle(内存/CPU检测图, 15);/第二个参数 15 是字体大小 chart.write(chartdiv); /将chart写入到一个div中 chart=null; /图表对象使用过后将其设置为空，自己的目的是让浏览器垃圾回收器对其进行回收以便释放资源，但是多次运行试验发现并不像自己想象的这样，内存还是难以回收，这也是目前最大的问题 valueAxis1 = null; graph1 = null; graph2 = null; categoryAxis = null; guide = null; legend = null;/数据生成函数，数据由ajax异步请求获取 function generateChartData() $.ajax( type : get, url : $pageContext.request.contextPath/getData, dataType : text, data : , success : function(result) /返回的result是字符串类型的，调用解析字符串函数 parseData(result,600);/第二个参数是指一个页面最大显示多少秒个数据，600代表十分钟，超过十分钟则图表自动滚动 show();/数据处理好以后调用show（） 方法，绘图代码放在此函数中 showChart2();/调用第一个绘图函数，这个绘制的是3D柱状图 , error : function(XMLHttpRequest, textStatus, errorThrown) alert(请求异常，请检查服务器是否正常运行！ + XMLHttpRequest.status + + XMLHttpRequest.readyState + + textStatus); ); function parseData(result,num) /接收到的后台的数据格式是：90_30 第一个是内存使用率，第二个是CPU使用率 var tempData = result.split(_); /将数据追加到chartData数组中 chartData.push( date:k+, memoryRate:parseInt(tempData0), cpuRate:parseInt(tempData1) ); /将数据追加到chartData2数组中 chartData2.push( type:CPU使用率, cpuRate:tempData1 , type:内存使用率, memoryRate:tempData0, totalThread:tempData2 ); /当数据大小超过设置的值时，每次将数据添加到末尾的时候，将数组中的第一个数据删除 var newChartData=; var len=chartData.length; if(lennum) for(var m=0;mnum;m+) newChartDatam=chartDatalen-num+m; chartData = newChartData; window.setInterval(generateChartData,2000); /该函数绘制了3D柱状图function showChart2() var chart = null; chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData2; chart.categoryField = type; chart.color = #FFFFFF; chart.fontSize = 14;/设置字体大小 chart.startDuration = 1;/设置开始延迟，其实就是设置动画效果时间，默认为0没有动画效果 chart.plotAreaFillAlphas = 0.2;/设置柱状图区域的透明度 /设置3D属性，如果不设置以下2个属性则是二维图 chart.angle = 30; chart.depth3D = 60; var categoryAxis = chart.categoryAxis; categoryAxis.gridAlpha = 0.2; categoryAxis.gridPosition = start; categoryAxis.gridColor = #FFFFFF; categoryAxis.axisColor = #FFFFFF; categoryAxis.axisAlpha = 0.5; categoryAxis.dashLength = 5; var valueAxis = new AmCharts.ValueAxis(); valueAxis.gridAlpha = 0.2; valueAxis.gridColor = #FFFFFF; valueAxis.axisColor = #FFFFFF; valueAxis.axisAlpha = 0.5; valueAxis.dashLength = 5; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.titleColor = #FFFFFF; valueAxis.unit = %; chart.addValueAxis(valueAxis); var graph1 = new AmCharts.AmGraph(); graph1.valueField = cpuRate; graph1.type = column;/设置成柱状图类型 graph1.lineAlpha = 0; graph1.lineColor = #00ff00; graph1.fillAlphas = 1; chart.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = memoryRate; graph2.type = column; graph2.lineAlpha = 0; graph2.lineColor = #d1655d; graph2.fillAlphas = 0.5; graph2.cornerRadiusTop = 8; chart.addGraph(graph2); chartData2 = ;/每次绘制完以后清空数据，因此该类柱状图只显示实时的状态，历史部分部不需要 chart.write(chartdiv2); 2)