Highcharts學習筆記-line（內存使用監視）

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 hf

import grails.converters.JSON

class 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，最終的結果

• 大小: 7.7 KB

• 查看圖片附件