利用Amcharts和Highcharts繪制CPU使用率效果圖對比

1、北京市博匯科技有限公司Broadway Science & Technology Co., Ltd北京市博匯科技有限公司利用Amcharts和Highcharts圖形插件分別繪制CPU使用率效果圖對比分析2013.09.12修改記錄序號日期作者修改記錄評審12013-09-12王震陽創(chuàng)建一、前言我們公司在開發(fā)前端頁面的過程中需要大量使用靜態(tài)或者動態(tài)的圖形報表。利用flash和flex等技術可以實現豐富的圖表功能，但是這些插件的致命之處是通用性較差，而純javascript實現的圖形插件的通用性是最好的，只要瀏覽器兼容javascript那就兼容該插件，與平臺和開發(fā)環(huán)境沒有關系，Amcharts

2、 和Highcharts是兩個非常有名的Javascript圖形插件可以幫助我們解決以上問題。自己分別用這兩個插件制作了CPU和內存使用率的動態(tài)圖表，以此來對比分析這兩個插件的優(yōu)缺點。2、 搭配開發(fā)環(huán)境本次測試使用的開發(fā)工具是eclipse 4.3.0版本，開發(fā)語言是Java，由servlet程序為圖表提供數據，前臺只需要利用ajax請求servlet即可獲取到CPU和內存使用率數據。使用的Amcharts 是Javascript版本的（Amcharts有flash和javascript版本之分），版本號是2.11.2，使用的Highcharts版本號是3.0.3。在eclipse中新建一個動

3、態(tài)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）個文件時h

4、ighcharts的核心js庫，可以繪制常用的線性圖和區(qū)域圖，第3）個文件是用于導出圖表的插件，是highcharts自帶的一個插件。第4）個文件是highcharts提供的拓展js庫，用戶繪制一些特殊圖形，比如在本次測試中利用該插件繪制了類似于汽車儀表盤的圖表，用來顯示CPU和內存的實時運行狀態(tài)。利用java獲取操作系統(tǒng)的CPU和內存的使用狀態(tài)并不是此次要演示的重點內容，因此在此只簡單介紹。JDK提供的java.lang.management.ManagementFactory（1.5版本以上才有）和sun公司提供的com.sun.management.OperatingSystemMXBe

5、an類，其實都在jdk中。獲取操作系統(tǒng)內存信息： / 總的物理內存 單位均為byte long totalMemorySize = osmxb.getTotalPhysicalMemorySize(); / 剩余的物理內存 long freePhysicalMemorySize = osmxb.getFreePhysicalMemorySize(); 有了總物理內存跟剩余內存，那么計算內存使用率就不用再多說了吧，關鍵是下一個，獲取CPU使用率。很遺憾的是jdk并沒有直接提供獲取操作系統(tǒng)CPU信息的接口，因此只能通過操作系統(tǒng)本地平臺的命令來間接獲取。這里只列出獲取windows平臺的CPU信息。

6、 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)

7、; 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 lo

8、ng 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

9、 = 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

10、; 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).tri

11、m() .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.printStack

12、Trace(); 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; 將上面的獲取信

13、息功能封裝成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.print

14、StackTrace();/操作系統(tǒng)總物理內存大小Long totalMemorySize = infoBean.getTotalMemorySize();/操作系統(tǒng)已經使用內存大小Long usedMemory = infoBean.getUsedMemory();/操作系統(tǒng)內存使用率String memoryRate = (int)(usedMemory+0.)/totalMemorySize)*10000)/100)+;/操作系統(tǒng)的cpu使用率String cpuRate = (int)infoBean.getCpuRatio()+;String result = memoryRate+

15、_+cpuRate;System.out.println(result); /將內存信息和CPU信息作為字符串返回給請求者response.getWriter().write(result);3、 前臺頁面1、 效果預覽1） Amcharts圖表預覽圖3-1可以分為兩部分，其實是由兩個圖表拼接在一起的。上半部分是記錄了CPU和內存在最近90秒的歷史記錄，并持續(xù)每秒步進一次。下半部分用了Amcharts的3D柱狀圖的高低來代表使用率，每秒跳動一次。圖3-1 Amcharts繪制CPU/內存使用率實時狀態(tài)截圖2） Highcharts圖表預覽圖3-4也是由上下兩張圖拼接而成。上半部分記錄了最近20

16、0秒的CPU和內存使用情況，下半部分則是實時狀態(tài)，上半部分每一秒步進一次，下半部分0.5秒跳動一次，由于這兩張圖的刷新時間不一致，因此highcharts.jsp中分別為每個圖表分配了定時器和ajax函數。圖3-2 HighCharts繪制CPU/內存使用率實時狀態(tài)圖2、 javascript代碼詳解 1）amcharts.jsp在中置入兩個div，Amcharts和Highcharts就是將圖表放在div中的。 在中編寫javascript代碼。 var chartData = ;/聲明一個數組，用于存放圖表的坐標 var chartData2= ;var k=0; /該函數用于繪制圖3-1

17、中的上半個圖function show() var chart = new AmCharts.AmSerialChart();/聲明amcharts的核心對象 var valueAxis = new AmCharts.ValueAxis();/Y軸對象 var graph1 = new AmCharts.AmGraph();/圖像對象，指圖表上的折線或者區(qū)域等，這里代表內存使用率折線 var graph2 = new AmCharts.AmGraph();/這里代表CPU使用率的區(qū)域面積 var categoryAxis = chart.categoryAxis;/直譯是分類軸，這里可以理解成

18、X軸對象 var guide = new AmCharts.Guide();/向導，直接聽名字很難理解，其實可以是一條垂直于X軸的標記線或者帶狀區(qū)域，或者是垂直于Y軸的標記線或者帶狀區(qū)域，比如我們鼠標放在圖表中的某個位置時，會看到一條垂直X軸的線條，如果這個線條是畫上去的靜態(tài)的那么就是guide了。 var legend = new AmCharts.AmLegend();/圖例，一個chart只能有一個legend，但是一個legend可以有多個圖標 var chartCursor = new AmCharts.ChartCursor();/鼠標形狀，不僅提供了鼠標形狀功能，還對應著鼠標可以

19、執(zhí)行的操作 chart.pathToImages = amcharts/images/;/為chart指定一個引用的圖片資源路徑 chart.zoomOutButton = backgroundColor: #000000, backgroundAlpha: 0.15 ;/設置chart的放縮按鈕樣式，默認情況下，按住鼠標左鍵滑動鼠標可以放大圖像，這時在右上角會有縮小按鈕。 chart.dataProvider = chartData;/給chart指定一個數組作為數據來源 chart.categoryField = date;/給chart指定“date”字段作為X軸 categoryAxi

20、s.parseDates = false; /是否解析指定的X軸字段為日期，X軸可以是日期格式也可以是其他，因此在此次測試中，對日期沒有要求，因此設置為false categoryAxis.dashLength = 0;/用于設置破折線每一段的長度，默認為0，是實心線 categoryAxis.gridAlpha = 0.5;/垂直于X軸形成的網格的透明度，最小值0為不顯示，最大值1為全顯示 categoryAxis.axisColor = #DADADA;/設置X軸的顏色 / categoryAxis.position = top;/設置X軸的位置，可以在上或者下，默認在下方 categor

21、yAxis.gridPosition = start;/設置垂直于X軸的網格的開始位置 categoryAxis.startOnAxis = false;/是否將起始繪制點在X軸上開始，默認為false，第一個點從中間開始繪制，如果設置為true，則第一個點位于第一個X軸上。 categoryAxis.gridColor = #00FF00;/設置網格顏色 chartCursor.zoomable = false; / 是否開啟縮放功能 chartCursor.cursorAlpha = 0.3;/設置光標形狀的透明度 chartCursor.cursorPosition = mouse;/設

22、置光標的位置，設置成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

23、.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則在圖表的內

24、側 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;/設置圖例顯示數值時該數值的大小，當鼠標放在圖上某個位置時，對應的圖例右側

25、會顯示當前鼠標選中點的數值大小 legend.color=FFFFFF;/設置圖例顏色 chart.addLegend(legend);/將圖例添加為chart的屬性 guide.lineColor = #00FF00;/設置向導線的顏色 guide.lineAlpha = 0.5;/透明度 guide.value=0;/其實值 guide.toValue=10;/目標值，這兩個數值，構成了一個區(qū)域，該區(qū)域從Y軸的0刻度開始到刻度為10位置結束 guide.dashLength = 2;/可以將向導線設置成破折線 guide.inside = true;/向導線位 valueAxis1.add

26、Guide(guide);/給Y軸添加向導線屬性，一個Y軸或者X軸可以設置多個向導線 graph1.valueAxis = valueAxis1; / 指定圖形1即內存使用率圖使用的Y軸為valueAxis1 graph2.valueAxis = valueAxis1; /因為這里連個graph一個線狀的一個區(qū)域狀的都使用百分比作為單位，所以就可以使用同一個Y軸 graph1.title = 內存使用率; graph2.title = CPU使用率; graph1.valueField = memoryRate;/指定一個字段作為graph1的數值 graph2.valueField = cp

27、uRate; graph1.bullet = round;/bullet是當鼠標放到圖像上時，被選中的點高亮顯示區(qū)域，這里是設置其形狀為圓形 graph1.hideBulletsCount = 10;/設置最多一個圖表中顯示多少個bullet，如果bullet過多則會不美觀 graph1.lineColor = #d1655d;/設置圖像的線條顏色 graph2.lineColor = #00FF00; graph1.bulletBorderColor = #FFFFFF;/設置bullet的邊框顏色 graph1.bulletBorderThickness = 2; /設置bullet邊框寬

28、度 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.w

29、rite(chartdiv); /將chart寫入到一個div中 chart=null; /圖表對象使用過后將其設置為空，自己的目的是讓瀏覽器垃圾回收器對其進行回收以便釋放資源，但是多次運行試驗發(fā)現并不像自己想象的這樣，內存還是難以回收，這也是目前最大的問題 valueAxis1 = null; graph1 = null; graph2 = null; categoryAxis = null; guide = null; legend = null;/數據生成函數，數據由ajax異步請求獲取 function generateChartData() $.ajax( type : get, u

30、rl : $pageContext.request.contextPath/getData, dataType : text, data : , success : function(result) /返回的result是字符串類型的，調用解析字符串函數 parseData(result,600);/第二個參數是指一個頁面最大顯示多少秒個數據，600代表十分鐘，超過十分鐘則圖表自動滾動 show();/數據處理好以后調用show（） 方法，繪圖代碼放在此函數中 showChart2();/調用第一個繪圖函數，這個繪制的是3D柱狀圖 , error : function(XMLHttpReque

31、st, 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(tem

32、pData0), 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+) newChartData

33、m=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.

34、startDuration = 1;/設置開始延遲，其實就是設置動畫效果時間，默認為0沒有動畫效果 chart.plotAreaFillAlphas = 0.2;/設置柱狀圖區(qū)域的透明度 /設置3D屬性，如果不設置以下2個屬性則是二維圖 chart.angle = 30; chart.depth3D = 60; var categoryAxis = chart.categoryAxis; categoryAxis.gridAlpha = 0.2; categoryAxis.gridPosition = start; categoryAxis.gridColor = #FFFFFF; categ

35、oryAxis.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; value

36、Axis.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 = ;/每次繪制完以后清空數據，因此該類柱狀圖只顯示實時的狀態(tài)，歷史部分部不需要 chart.write(chartdiv2); 2)