利用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等技術(shù)可以實(shí)現(xiàn)豐富的圖表功能，但是這些插件的致命之處是通用性較差，而純javascript實(shí)現(xiàn)的圖形插件的通用性是最好的，只要瀏覽器兼容javascript那就兼容該插件，與平臺和開發(fā)環(huán)境沒有關(guān)系，Amcharts

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

3、態(tài)web項(xiàng)目。新建兩個jsp文件，分別為amcharts.jsp和highcharts.jsp，在amcharts.jsp中引入Amcharts依賴文件： 1） 2） 3） 這里的第1）個文件是Amcharts的樣式文件，第2）個文件是Amcharts的核心js庫，第3）個文件其實(shí)并不是Amcharts必須的，之所以引入是因?yàn)樾枰胘query達(dá)到異步請求功能，同時需要將上面三個文件放到指定的目錄。在highcharts.jsp中引入依賴文件： 1） 2） 3） 4） 這里的第1）個jquery插件版本必須高于1.5.x,否則可能不兼容，這是Highcharts必須要依賴的。第2）個文件時h

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

5、an類，其實(shí)都在jdk中。獲取操作系統(tǒng)內(nèi)存信息： / 總的物理內(nèi)存 單位均為byte long totalMemorySize = osmxb.getTotalPhysicalMemorySize(); / 剩余的物理內(nèi)存 long freePhysicalMemorySize = osmxb.getFreePhysicalMemorySize(); 有了總物理內(nèi)存跟剩余內(nèi)存，那么計算內(nèi)存使用率就不用再多說了吧，關(guān)鍵是下一個，獲取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; / 獲取進(jìn)程信息 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和內(nèi)存信息封裝到MonitorBean對象，然后寫一個servlet服務(wù)程序。程序的核心代碼：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)總物理內(nèi)存大小Long totalMemorySize = infoBean.getTotalMemorySize();/操作系統(tǒng)已經(jīng)使用內(nèi)存大小Long usedMemory = infoBean.getUsedMemory();/操作系統(tǒng)內(nèi)存使用率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); /將內(nèi)存信息和CPU信息作為字符串返回給請求者response.getWriter().write(result);3、 前臺頁面1、 效果預(yù)覽1） Amcharts圖表預(yù)覽圖3-1可以分為兩部分，其實(shí)是由兩個圖表拼接在一起的。上半部分是記錄了CPU和內(nèi)存在最近90秒的歷史記錄，并持續(xù)每秒步進(jìn)一次。下半部分用了Amcharts的3D柱狀圖的高低來代表使用率，每秒跳動一次。圖3-1 Amcharts繪制CPU/內(nèi)存使用率實(shí)時狀態(tài)截圖2） Highcharts圖表預(yù)覽圖3-4也是由上下兩張圖拼接而成。上半部分記錄了最近20

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

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

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

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

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

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

22、置光標(biāo)的位置，設(shè)置成mouse則，光標(biāo)就在鼠標(biāo)的真實(shí)位置上 chart.addChartCursor(chartCursor);/將設(shè)置好的光標(biāo)對象添加到chart對象中 valueAxis1.axisColor = #FF6600;/Y 軸的顏色 valueAxis1.axisThickness = 1;/Y軸的刻度線的寬度 valueAxis1.gridAlpha = 0;/Y軸網(wǎng)的透明度 valueAxis1.tickLength =0;/Y軸刻度線的長度 valueAxis1.minimum = 0;/設(shè)置Y軸的最小值和最大值，如果不設(shè)置，那么chart會自動調(diào)整 valueAxis1

23、.maximum = 100; valueAxis1.title=物理內(nèi)存/CPU使用率;/Y軸名稱 valueAegersOnly = false;/Y軸刻度是否只顯示整數(shù)類型 valueAxis1.gridCount = 10;/Y軸刻度個數(shù) valueAxis1.unit = %;/Y軸單位 valueAxis1.labelsEnabled = true;/Y軸的標(biāo)簽是否顯示，默認(rèn)為true，如果設(shè)置為false，則Y軸只顯示刻度值，其他都不顯示 valueAxis1.inside = false;/Y 軸的位置，默認(rèn)false在圖表的外圍，如果設(shè)置成true則在圖表的內(nèi)

24、側(cè) valueAxis1.position = left;/Y 軸的位置，可以在左側(cè)也可以在right chart.addValueAxis(valueAxis1);/將設(shè)置好屬性的Y軸添加到chart對象上，一個對象可以有多個Y軸 legend.align = center;/設(shè)置圖例的橫向布局方式 legend.title=圖例;/設(shè)置圖例的名稱 legend.horizontalGap = 10;/設(shè)置水平間隔 legend.equalWidths = false; legend.valueWidth = 120;/設(shè)置圖例顯示數(shù)值時該數(shù)值的大小，當(dāng)鼠標(biāo)放在圖上某個位置時，對應(yīng)的圖例右側(cè)

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

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

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

28、度 graph.bulletSize = 14; /設(shè)置bullet的大小 / graph1.colorField = color;/用戶可以自定義bullet的顏色，顏色值放在chartData數(shù)組中 graph1.type = line; / 設(shè)置圖形類型，如果是條狀圖則設(shè)置為column graph2.type = line; / chart.addGraph(graph1);/給chart添加graph屬性，一個chart可以有多個 chart.addGraph(graph2); chart.addTitle(內(nèi)存/CPU檢測圖, 15);/第二個參數(shù) 15 是字體大小 chart.w

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

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

31、st, textStatus, errorThrown) alert(請求異常，請檢查服務(wù)器是否正常運(yùn)行！ + XMLHttpRequest.status + + XMLHttpRequest.readyState + + textStatus); ); function parseData(result,num) /接收到的后臺的數(shù)據(jù)格式是：90_30 第一個是內(nèi)存使用率，第二個是CPU使用率 var tempData = result.split(_); /將數(shù)據(jù)追加到chartData數(shù)組中 chartData.push( date:k+, memoryRate:parseInt(tem

32、pData0), cpuRate:parseInt(tempData1) ); /將數(shù)據(jù)追加到chartData2數(shù)組中 chartData2.push( type:CPU使用率, cpuRate:tempData1 , type:內(nèi)存使用率, memoryRate:tempData0, totalThread:tempData2 ); /當(dāng)數(shù)據(jù)大小超過設(shè)置的值時，每次將數(shù)據(jù)添加到末尾的時候，將數(shù)組中的第一個數(shù)據(jù)刪除 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); /該函數(shù)繪制了3D柱狀圖function showChart2() var chart = null; chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData2; chart.categoryField = type; chart.color = #FFFFFF; chart.fontSize = 14;/設(shè)置字體大小 chart.

34、startDuration = 1;/設(shè)置開始延遲，其實(shí)就是設(shè)置動畫效果時間，默認(rèn)為0沒有動畫效果 chart.plotAreaFillAlphas = 0.2;/設(shè)置柱狀圖區(qū)域的透明度 /設(shè)置3D屬性，如果不設(shè)置以下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;/設(shè)置成柱狀圖類型 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 = ;/每次繪制完以后清空數(shù)據(jù)，因此該類柱狀圖只顯示實(shí)時的狀態(tài)，歷史部分部不需要 chart.write(chartdiv2); 2)