效果如图所示,每个五秒钟图会移动一次(其实是重新画了一张图),能显示所监控的cpu信息。
pastCpuInfomation函数主要用来显示一张折线图
updateCpuPic函数把5秒前的图去掉,重新根据现有数据画一张图。
updateCpuInfomation函数 把最新的点加入存储折线的数组中
再接着在界面中弄两个定时器,让他们每个5秒执行一次updateCpuPic,每个1分钟执行一次updateCpuInfomation,图画就动起来了。
PS:代码中执行好多操作前都会在服务器中获取下服务器的当前时间 ,ajax写得有点乱,我也不知道规不规范,实现动态图的方法好像也不是太好,最好是能直接更新线的数据的,希望朋友们多多指教!画表的代码已经标红(30行到60行)
复制代码 代码如下:
var past_cpu_service_statistics_line = new Array();
var plot;
function pastCpuInfomation() {
// 历史cpu数据
// 本地时间
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
success: function(currentTime){
console.log("取到服务器时间"+currentTime);
//获取历史cpu数据
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime 是伪数据,时间在后台获取
data: "hostName=" + "login.cheos.cn",
success: function(result){
for (key in result) {
// 去得到时间转化为int
var intKey = parseInt(key);
var transferTime = new Date(intKey);
console.log("transferTime:"+ key + "----resut:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
<span style="color:#ff0000;"> // 历史cpu情况表
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ],
{
axes: {
xaxis: {
label: '时间',
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min : (currentTime -1000 * 60 * 60),
max: (currentTime),
// 横(纵)坐标显示的最小值
// ticks:['']
},
yaxis: {
label: 'cpu监控',
}
},
highlighter: {
show: true,
sizeAdjust : 7.5
},
cursor: {
show: false
}
});
</span>
},
error: function(textStatus){
alert("获取监控信息失败!");
}
});
//获取历史cpu数据ajax结束
},
error: function(textStatus){
alert("取历史cpu数据时候获取服务器时间失败!");
}
});
}
function updateCpuPic() {
console.log("正在更新cpu视图");
//先取得服务器时间,用来画横坐标
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
success: function(result){
var intKey =parseInt(result);
var transferTime = new Date(intKey);
console.log("获取到服务器时间:"+result+"------"+transferTime);
//操作图表
//如果已经存在图表,则摧毁
if (plot) {
// plot.destory();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
plot= null;
}
//重新画图表
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ], {
axes: {
xaxis: {
label: '时间',
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (result - 1000 * 60 * 60),
max: (result),
// 横(纵)坐标显示的最小值
// ticks:['']
},
yaxis: {
label: 'cpu监控',
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
},
replot: {
resetAxes: true
}
});
},
error: function(textStatus){
alert("获取服务器时间失败!");
}
});
}
function updateCpuInfomation() {
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getLatestCpuMonitorData.htm',
data: "hostName=" + "login.cheos.cn",
success: function(result){
// 更新一次数据
for (key in result) {
var intKey = parseInt(key);
var transferTime = new Date(intKey);
console.log("----------------更新cpu信息---:" + key + "----更新时间:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
// 更新图表
// updateCpuPic();
},
error: function(textStatus){
alert("更新cpu信息失败!");
}
});
}
jqplot,ajax,折线图
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]