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
分享到:
相关推荐
gatling-charts-highcharts-bundle-3.3.1-bundle,很好用的测试工具,有一定的学习成本。
1.gatling和其他压力工具相比有个好处是放在同一内网环境下linux服务器上,这样避免其他压力使用办公机使用共有网络,网络情况对压力测试的影响。 2 生成比较详细的压力测试报告。 3 能够更灵活的编写压力脚本。 ...
highcharts--基本使用手册(中文API).doc
Highcharts-export-module-asp.net, 在你自己的ASP.NET 服务器上,该模块允许你导出图表 Tek4.Highcharts.Exporting 程序集Tek4 ASP.NET ( http://highcharts.com/ )的导出模块。 版本 1.0.2.0 ( 3,2012 )基于 ASP...
1.5.4版的gatling
Tek4.Highcharts Exporting模块和实例 sln代码
Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用 Highcharts-6.0.2-demo.zip,仅供学习交流使用,测试了,可以使用
java+echarts实现动态图表,jsp前台页面通过ajax异步请求,controller层处理完数据返回前台实现动态图表。 一个简单实例: 1. 前台echarts图表依赖js文件: ... jquery-1.11.2.min.js jquery依赖js文件 ...
前端项目-highcharts-export-csv,用于将图表数据导出到csv、xls或html表的HighCharts插件
Highcharts Gantt 7
零基础highcharts生成报表-简单应用 .用到的文件,非能运行版
highcharts--基本使用 各种图表
gatling 新兴的性能测试工具 使用scala语言编写脚本
Highmaps 可以单独使用,也可以作为 Highcharts 的一个组件来使用。 主要优势(功能特点) 完美支持移动端 Highmaps 设计之初就考虑到了移动设备浏览器,移动平台上多点触摸、手势操作均支持,同时 Highmaps 在 PC ...
highcharts、highstock常用图表格式化工具文件,官网例子:https://www.hcharts.cn/demo/highstock/basic-line
在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业...
highcharts-axis-labels-shorten 这是一个用于 Highcharts 的插件,用于缩短 x 轴上的标签并在标签过多时跳过一些标签。 跳过和缩短标签时,插件会尊重字体系列和字体大小设置。 免责声明:此插件仅适用于 svg ...
Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。
在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用 Highstock 完全不需要经过我们的许可,直接可以任意使用! 商业...
highcharts--基本使用(API常用属性),搜集整理,希望对您有帮助,其实您看源码中的例子也行。