Highcharts使用心得---绘制cpu/内存心电图

来源：互联网发布：大数据整合方案编辑：程序博客网时间：2024/04/29 12:53

利用Highcharts插件绘制动态心电图，Highcharts的demo网站：https://www.hcharts.cn/demo/highcharts，具体参数可参看api

描述：读取计算机cpu或内存使用率，绘制心电图，利用Ajax每秒去请求后台数据，做局部刷新，实现动态效果

1、html内容比较简单

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>cpu/内容使用率</title><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script><script type="text/javascript" src="js/myjs.js"></script></head><body><div id="container" style="width:800px;height:400px"></div><input type="button" value="暂停" onclick="stop();"/></body></html>

2、js代码

var timer;$(function() {   $(document).ready(function() {     Highcharts.setOptions({       global: {         useUTC: false      },      colors:['#6699ff','#00ff01']    });     var chart;     chart = new Highcharts.Chart({       chart: {         renderTo: 'container',         type: 'line',         animation: Highcharts.svg,         marginRight: 10,         events: {           load: function() {}         }       },       title: {         text: 'CPU/内存使用率'       },       credits: {    enabled: false      },      xAxis: {         type: 'datetime',         tickPixelInterval: 50       },       yAxis: [{      max:100,     title: {          text: '值(百分比)'      },   }],  tooltip: {         formatter: function () {                return  Highcharts.dateFormat('%H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 0)+"%";              }      },       series: [{         name: 'CPU使用率',         marker:{        enabled:false //去掉节点        },        data: (function() {                         var data = [],           time = (new Date()).getTime(),           i;           for (i = -60; i <= 0; i++) {             data.push({               x: time + i * 1000,               y: 0             });           }           return data;         })()       },      {     name: '内存使用率',     marker:{      enabled:false //去掉节点    },    data: (function() {                      var data = [],        time = (new Date()).getTime(),        i;        for (i = -60; i <= 0; i++) {          data.push({          x: time + i * 1000,          y: 0          });        }        return data;      })()     }      ]      });                 var series1 = chart.series[0];     var series2 = chart.series[1];     timer = setInterval(function() {$.ajax({url:"TestHighchart",type:"POST",success:function(data){  var d = JSON.parse(data);      var x = (new Date()).getTime();      series1.addPoint([x, parseInt(d.cpu)], true, true);       series2.addPoint([x, parseInt(d.memory)], true, true); }});    },     1000);   }); });function stop(){clearInterval(timer);}

3、servlet代码，获取当前计算机的cpu和内存使用信息，利用sigar实现，需引入Sigar相关jar及文件，具体请百度，此处不作详细介绍

package testUtil;import java.io.IOException;import java.math.BigDecimal;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSON;import net.sf.json.JSONObject;import org.hyperic.sigar.CpuInfo;import org.hyperic.sigar.CpuPerc;import org.hyperic.sigar.Mem;import org.hyperic.sigar.Sigar;import org.hyperic.sigar.SigarException;import org.hyperic.sigar.Swap;@WebServlet("/TestHighchart")public class TestHighchart extends HttpServlet{    private static final long serialVersionUID = 1L;    public TestHighchart()    {        super();    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException    {        JSONObject jsb = new JSONObject();        try        {            jsb.accumulate("cpu", cpu());            jsb.accumulate("memory", memory());        } catch (SigarException e)        {            e.printStackTrace();        }        response.getWriter().print(jsb.toString());    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException,            IOException    {        doGet(request, response);    }    private static String cpu() throws SigarException    {        Sigar sigar = new Sigar();        CpuPerc perc = sigar.getCpuPerc();        System.out.println("cpu的空闲率: " + new BigDecimal(perc.getIdle()*100).setScale(0, BigDecimal.ROUND_HALF_UP) + "%");//获取当前cpu的空闲率        System.out.println("cpu的占用率: "+ new BigDecimal(perc.getCombined()*100).setScale(0, BigDecimal.ROUND_HALF_UP)+ "%");//获取当前cpu的占用率        return String.valueOf(new BigDecimal(perc.getCombined()*100).setScale(0, BigDecimal.ROUND_HALF_UP));    }        private static String memory() throws SigarException {        Sigar sigar = new Sigar();        Mem mem = sigar.getMem();        // 内存总量        System.out.println("内存总量:" + (mem.getTotal() / 1024)/1024 + "MB");        // 当前内存使用量        System.out.println("当前内存使用量:" + (mem.getUsed() / 1024)/1024 + "MB");        // 当前内存剩余量        System.out.println("当前内存剩余量:" + (mem.getFree() / 1024)/1024 + "MB");                double a = (mem.getTotal() / 1024)/1024;        double b = (mem.getFree() / 1024)/1024;        //内存使用率        System.out.println("内存使用率:" + new BigDecimal(b/a*100).setScale(0, BigDecimal.ROUND_HALF_UP) + "%");                return String.valueOf(new BigDecimal(b/a*100).setScale(0, BigDecimal.ROUND_HALF_UP));    }        public static void main(String[] args)    {        try        {            cpu();            memory();        } catch (SigarException e)        {            e.printStackTrace();        }    }}

4、效果图如下：

阅读全文

2 0

Highcharts使用心得---绘制cpu/内存 心电图

Highcharts使用心得---绘制cpu/内存心电图