Highcharts动态曲线图(使用jna监视cpu使用率)

fmms 8年前
     <p><span style="font-size:medium;">1、CPU使用率获取,因为我要用JNA调用,所以用c++调用windowAPI,编译成Dll文件;dll的代码如下:</span> </p>    <pre class="brush:cpp; toolbar: true; auto-links: false;">// DllTest.cpp : Defines the exported functions for the DLL application. //  #include "stdafx.h" #include "iostream" #include "stdafx.h" #define _WIN32_WINNT   0x0501 #include <Windows.h> #define MYLIBAPI  extern   "C"     __declspec( dllexport )   /* 要返回的函数声明 */ MYLIBAPI void getCpuInfo(int wait,double* d);  /* 函数的定义 */ //转换FILETIME类型 __int64 CompareFileTime ( FILETIME time1, FILETIME time2 ) {  __int64 a = time1.dwHighDateTime << 32 | time1.dwLowDateTime ;  __int64 b = time2.dwHighDateTime << 32 | time2.dwLowDateTime ;   return   (b - a); }  //函数的实体 /*wait是统计多长时间内的cpu使用率 d是返回的数组 */ void getCpuInfo(int wait,double* d){  HANDLE hEvent;  BOOL res ;   FILETIME preidleTime;  FILETIME prekernelTime;  FILETIME preuserTime;   FILETIME idleTime;  FILETIME kernelTime;  FILETIME userTime;   res = GetSystemTimes( &idleTime, &kernelTime, &userTime );    preidleTime = idleTime;  prekernelTime = kernelTime;  preuserTime = userTime ;   hEvent = CreateEvent (NULL,FALSE,FALSE,NULL); // 初始值为 nonsignaled ,并且每次触发后自动设置为nonsignaled   WaitForSingleObject( hEvent,wait); //等待500毫秒  res = GetSystemTimes( &idleTime, &kernelTime, &userTime );  int idle = CompareFileTime( preidleTime,idleTime);  int kernel = CompareFileTime( prekernelTime, kernelTime);  int user = CompareFileTime(preuserTime, userTime);  //cpu使用率的计算         double cpu = (kernel +user - idle) *100.0/(kernel+user);  //cpu空闲率的计算         double cpuidle = ( idle) *100.0/(kernel+user);   d[0] =cpu;  d[1] = cpuidle; }</pre>    <p><span style="font-size:medium;">2、JNA代码的定义</span> </p>    <pre class="brush:java; toolbar: true; auto-links: false;">package com.ligson.jna;  import com.sun.jna.Library; import com.sun.jna.Native;  //声明 interface MyDllLib extends Library {     /*      DllTest.dll是我编译后的dll文件,放在项目的根目录      */     MyDllLib INSTANCE = (MyDllLib) Native.loadLibrary("DllTest.dll", MyDllLib.class);     /*     这个与c++中函数的定义一样,唯一不同的double[] d没用用指针,但是数组的本身就是指针,      */     public void getCpuInfo(int wait, double[] d); }  public class GetCpuInfo {     static MyDllLib myDllLib = MyDllLib.INSTANCE;      public static double getCpu(int wait) {         //声明返回值         double[] d = new double[2];         myDllLib.getCpuInfo(wait,d);         return d[0];     } }</pre>    <p><span style="font-size:medium;">3、Web环境用grails框架,grails框架语法简单,各种东西定义都很方便,Controller的定义</span> </p>    <pre class="brush:java; toolbar: true; auto-links: false;">package hf  import grails.converters.JSON  class CpuMonitorController {    static List list = [];   static Map result = [:];   def index = {     render(view: 'cpu');   }    def getCpuInfo = {     double d = com.ligson.jna.GetCpuInfo.getCpu(500);     def l = [:];     l.x = new Date().getTime();     l.y = d;     list.add(l);      result.x = l.x;     result.y = l.y;     //返回json格式,x轴以时间为准,y轴以cpu占有率为准     return render(result as JSON);   } }</pre>    <p><span style="font-size:medium;">4、cpu.gsp的代码:</span> </p>    <pre class="brush:html; toolbar: true; auto-links: false;"><%--   Created by IntelliJ IDEA.   User: Administrator   Date: 12-1-10   Time: 下午7:49   To change this template use File | Settings | File Templates. --%>  <%@ page contentType="text/html;charset=UTF-8" %> <html> <head>   <title>Simple GSP page</title>   <script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.6.js')}"></script>   <!--这个是必须的,highChart的核心-->    <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/highcharts.js')}"></script>   <!--导出图片用的-->   <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/modules/exporting.js')}"></script>   <!--主题-->   <script type="text/javascript" src="${resource(dir: 'js', file: 'highcharts/themes/gray.js')}"></script>    <script type="text/javascript">       $(function() {       Highcharts.setOptions({         global: {           useUTC: false         }       });        //声明报表对象        chart = new Highcharts.Chart({         chart: {           renderTo: 'container',           defaultSeriesType: 'spline',           marginRight: 10         },         title: {           text: 'CPU使用率动态曲线图'         },         xAxis: {           title: {             text: '时间'           },           //linear" or "datetime"           type: 'datetime',           //坐标间隔           tickPixelInterval: 150         },         yAxis: {           title: {             text: '使用率'           },           //指定y=3直线的样式           plotLines: [             {               value: 0,               width: 10,               color: '#808080'             }           ]         },         //鼠标放在某个点上时的提示信息         //dateFormat,numberFormat是highCharts的工具类         tooltip: {           formatter: function() {             return '<b>' + this.series.name + '</b><br/>' +                     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +                     Highcharts.numberFormat(this.y, 2);           }         },         //曲线的示例说明,像地图上得图标说明一样         legend: {           enabled: true         },         //把曲线图导出成图片等格式         exporting: {           enabled: true         },         //放入数据         series: [           {             name: 'CPU使用率',             data: (function() {               // 初始化数据               var data = [],                       time = (new Date()).getTime(),                       i;               for (i = -19; i <= 0; i++) {                 data.push({                   x: time + i * 1000,                   y: Math.random() * 100                 });               }               return data;             })()           }         ]       });       getCpuInfo();     });      function getCpuInfo() {       $.post("${createLink(controller:'cpuMonitor',action:'getCpuInfo')}", {"random":Math.random()}, function(data) {         var result = {"x":data.x,"y":data.y};          var series = chart.series[0];         var x = result.x; // current time         var y = result.y;         series.addPoint([x, y], true, true);       }, "json");     }     setInterval(getCpuInfo, 1000);    </script>  </head> <body> <div style="width:800px;height:400px;overflow:auto;">   <div id="container" style="width:800px;height:400px;margin:0 auto;"></div> </div> </body> </html></pre>    <p><span style="font-size:medium;">5、漂亮的效果图:</span> </p>    <p><br /> <img style="width:688px;height:359px;" title="d2f4dfe9-8c8d-3dde-b40d-050ac2781107.png" border="0" alt="d2f4dfe9-8c8d-3dde-b40d-050ac2781107.png" src="https://simg.open-open.com/show/113b72fb93b9d4687cca0eefddde77fd.png" /></p>    <p><span style="font-size:medium;">6、我的dll库文件在下面,欢迎大家下载使用</span></p>    <p></p>    <p></p>    <div class="attachments">     <ul style="display:none;">      <li><a href="https://simg.open-open.com/show/113b72fb93b9d4687cca0eefddde77fd.png" target="_blank"><img class="magplus" title="点击查看原始大小图片" src="https://simg.open-open.com/show/6aef4c1083614ecfeb51d4c40d820233.png" /></a></li>      <li>大小: 38 KB</li>     </ul>     <ul>      <li><a href="/misc/goto?guid=4959500600296443548">DllTest.zip</a> (11.8 KB)</li>     </ul>    </div> 转自:    <a href="/misc/goto?guid=4959500600380634693" target="_blank">http://ligson.iteye.com/blog/1340433</a>