Highcharts学习笔记-line（内存使用监视）

来源：互联网发布：sql数据库远程连接编辑：程序博客网时间：2024/05/29 11:12

1、引入highCharts的js

<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery-1.6.js')}"></script>  <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>

2、通过MainController中的方法计算mem

package hfimport grails.converters.JSONclass MainController {  def calc = {    Runtime runtime = Runtime.getRuntime();    Process process = runtime.exec("tasklist /fo csv");    int i = 0;    def list = [];    process.inputStream.eachLine {String line ->      if (i >= 1) {        String[] p = line.split(/","/)        Mem mem = new Mem();        mem.name = p[0].trim().replaceAll("\"","");        mem.pid = p[1].trim() as int;        mem.memSize = (p[4].replaceAll("\"","").replaceAll(",","").replaceAll(" ","").replaceAll("K","")) as int;        println "name:"+mem.name+";pid:"+mem.pid+";memSize:"+mem.memSize;        def map = [:];        map.id=mem.id;        map.pid = mem.pid;        map.name = mem.name;        map.memSize = mem.memSize;        list.add(map);      }      i++;    }    return render(list as JSON);  }}

3、在web页面中用$.post去取得数据

 $(document).ready(function() {      $.post("${createLink(controller:'main',action:'calc')}", {type:'init'}, function(data) {        //进程名        var memNames = new Array();        //进程使用的内存        var memValues = new Array();        jQuery.each(data, function(index,mem) {          memNames[index] = mem.name;          memValues[index] = mem.memSize/1024;        });        //alert(data);        //alert(memValues)        showData(memNames,memValues);      });    });

4、html中div的设置

<div style="width:500px;height:500px;overflow:auto;"><div id="container" style="width:6000px;height:400px;margin:0 auto;"></div></div>

5、用highCharts显示数据

function showData(mNames,mValues) {      chart = new Highcharts.Chart({        chart: {          renderTo: 'container',          defaultSeriesType: 'line',          marginRight: 130,          marginBottom: 50        },        title: {          text: '电脑性能',          x: -20 //center        },        subtitle: {          text: '我的电脑性能',          x: -20        },        //X轴        xAxis: {          title:{            text:'进程名'          },          categories: mNames        },        //y轴        yAxis: {          title: {            text: '内存使用(MB)'          },          //y=0          plotLines: [            {              value: 0,              width: 2,              color: '#000000'            }          ]        },        tooltip: {          formatter: function() {            return '<b>' + this.series.name + '</b><br/>' +                    this.x + ': ' + this.y + 'M';          }        },        //右边的提示        legend: {          layout: 'vertical',          align: 'right',          verticalAlign: 'top',          x: -10,          y: 100,          borderWidth: 0        },        series: [          {            name: '内存使用',            data: mValues          }        ]      });    }

6，最终的结果

查看图片附件

0 0