Highcharts曲线图
//页面部分页面代码省略
<div id="main_id">
<table>
<tr>
<th id="cpudiv" width="25%;"></th>
<th id="iodiv" width="25%;"></th>
<th id="memory" width="25%;"></th>
<th id="chart" width="25%;"
style="min-width:400px;height:300px"></th>
</tr>
</table>
</div>
//由于一个页面显示四个图 所以放在一个表格中
//加载CPU数据 cputimes 多少时间刷新一次
var cpu_series = "";
var tobjCpu ="";
function cpuLoad(cpu_series, cputimes) {
var loadData = function () {
var url = "${path}/home/home_cpu";
AppKit.postJSON(url, null, function (json) {
var x = Number(json.data.times);//由于x.y轴只能接受数字 所以记得转换 否则报错
var y = Number(json.data.overall);
cpu_series[0].addPoint([x, y], true, true);//给x,y赋值
});
}
tobjCpu = setInterval(loadData, cputimes);//定义刷新时间 如果需要关闭
}
clearInterval(cpu_series);//关闭动态刷新
// 静态单曲线图
function cpu() {
var htmlStr = "<div id='chart1' />";
$("#cpudiv").append(htmlStr);
$('#chart1').highcharts({
chart: {
type: 'spline',
events: {
load: function () {
cpu_series = this.series;//把series作为全局变量 方便后台加载数据
}
}
},
title: {
text: 'CPU处理效率'
},
plotOptions: {//数据列此处为曲线上面的点数据显示
spline: {
dataLabels: {
enabled: true,
format:'{y:.4f}',//值小数点后四位
rotation: 45,//倾斜45°
allowOverlap :true
},
showInLegend: true,
}
},
xAxis: {
title: {
text: '当前时间'
},
type: 'datetime',
tickPixelInterval: 75
},
yAxis: {
title: {
text: 'CPU处理效率'
}
},
tooltip: {//辞职鼠标移动加载数据
formatter: function () {
return '当前时间:' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
'CPU处理效率:' + Highcharts.numberFormat(this.y, 4);
}
},
//legend: { 如果加上这个参数 曲线名称不能显示
//enabled: false
// },
exporting: {
enabled: false
},
series: [{//默认加载5个点如果不加载好像会报错
name: 'CPU占用率',
data: (function () {
var data = [];
var time = (new Date()).getTime();
for (var i = 0; i < 5; i++) {
data.push({
x: time,
y: 0
});
}
return data;
}())
}]
});
}
Highcharts双曲线图
/...和前面的CPU一样
//加载IO数据
var io_series="";
var tobjIo ="";
function ioLoad(io_series, iotimes) {
var loadData = function () {
var url = "${path}/home/home_io";
AppKit.postJSON(url, null, function (json) {
for (var i = 0; i < io_series.length; i++) {//判断有几条数据循环几次
var time = Number(json.data.times);//时间
var writeY = Number(json.data.writes);//写入速度
var readsY = Number(json.data.reads);//读取速度
if (i == 0) {//
io_series[i].addPoint([time, writeY], true, true);//给第一条数据赋值
} else {
io_series[i].addPoint([time, readsY], true, true);//给第二天调数据赋值
}
}
});
}
tobjIo = setInterval(loadData, iotimes);//刷新数据
}
clearInterval(tobjIo);//关闭刷新
//双曲线图
function io() {
var htmlStr = "<div id='chart2' />";
$("#iodiv").append(htmlStr);
$('#chart2').highcharts({
chart: {
type: 'spline',
renderTo: 'chart2',
marginRight: 10,
events: {
load: function () {
io_series = this.series;
}
}
},
title: {
text: '数据盘IO读写速度'
},
xAxis: {
title: {
text: '当前时间'
},
type: 'datetime',
tickPixelInterval: 75
},
plotOptions: {//数据列
spline: {
dataLabels: {
enabled: true,
format:'{y:.2f}',
rotation: 45,
allowOverlap :true
},
showInLegend: true,
}
},
yAxis: {
title: {
text: '读写速度'
},
labels: {
formatter: function () {
return this.value + '/kb';
}
}
},
tooltip: {
formatter: function () {
return '当前时间:' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
this.series.name+":" + Highcharts.numberFormat(this.y, 2) + 'kb/s';
}
},
exporting: {
enabled: false
},
series: [{
name: '读取数据',
data: (function () {
var data = [];
var time = (new Date()).getTime();
for (var i = 0; i < 5; i++) {
data.push({
x: time,
y: 0
});
}
return data;
}())
}, {
name: '写入数据',
data: (function () {
var data = [];
var time = (new Date()).getTime();
for (var i = 0; i < 5; i++) {
data.push({
x: time,
y: 0
});
}
return data;
}())
}]
});
}
Highcharts 柱状图
var memory_series ="";
var tobjMemory ="";
//加载内存数据
function memoryLoad(memory_series, memory_times) {
var loadData = function () {
var urls = "${path}/home/home_memory";
AppKit.postJSON(urls, null, function (json) {
var datas = [];
datas.push({y: Number(json.data.overall / 1024), color: 'green', name: '总内存'});
datas.push({y: Number(json.data.remaining / 1024), color: '#b47095', name: '使用内存'});
datas.push({y: Number(json.data.employ / 1024), color: '#2ab4ac', name: '剩余内存'});
memory_series[0].setData(datas);
});
}
tobjMemory = setInterval(loadData, memory_times);
}
//处理内存图
function memory() {
var htmlStr = "<div id='chart3' />";
$("#memory").append(htmlStr);
$('#chart3').highcharts({
chart: {
type: 'column',
events: {
load: function () {
memory_series = this.series;
}
}
},
tooltip: {
formatter: function () {
return this.x + ':' + Highcharts.numberFormat(this.y, 0) + ' M';
}
},
plotOptions: {//数据列
column: {
dataLabels: {
enabled: true,
format:'{y:.0f} M'
},
showInLegend: true,
}
},
title: {
text: '总体内存'
},
xAxis: {
categories: ['总内存', '使用内存', '剩余内存']
},
yAxis: {
title: {
text: '内存使用情况'
},
labels: {
formatter: function () {
return this.value + '/M';
}
}
},
legend: {
enabled: false
},
series: [{
data: [0, 0, 0]
}]
});
}