效果如圖所示，每個(gè)五秒鐘圖會(huì)移動(dòng)一次（其實(shí)是重新畫(huà)了一張圖），能顯示所監(jiān)控的cpu信息。
pastCpuInfomation函數(shù)主要用來(lái)顯示一張折線圖
updateCpuPic函數(shù)把5秒前的圖去掉，重新根據(jù)現(xiàn)有數(shù)據(jù)畫(huà)一張圖。
updateCpuInfomation函數(shù) 把最新的點(diǎn)加入存儲(chǔ)折線的數(shù)組中
再接著在界面中弄兩個(gè)定時(shí)器，讓他們每個(gè)5秒執(zhí)行一次updateCpuPic，每個(gè)1分鐘執(zhí)行一次updateCpuInfomation，圖畫(huà)就動(dòng)起來(lái)了。
PS：代碼中執(zhí)行好多操作前都會(huì)在服務(wù)器中獲取下服務(wù)器的當(dāng)前時(shí)間 ，ajax寫(xiě)得有點(diǎn)亂，我也不知道規(guī)不規(guī)范，實(shí)現(xiàn)動(dòng)態(tài)圖的方法好像也不是太好，最好是能直接更新線的數(shù)據(jù)的，希望朋友們多多指教！畫(huà)表的代碼已經(jīng)標(biāo)紅（30行到60行）
var past_cpu_service_statistics_line = new Array();
var plot;
function pastCpuInfomation() {
// 歷史cpu數(shù)據(jù)
// 本地時(shí)間
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getServerCurrentTime.htm',
success: function(currentTime){
console.log("取到服務(wù)器時(shí)間"+currentTime);
//獲取歷史cpu數(shù)據(jù)
$.ajax({
type: "POST",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
url: globalObj.path + '/server/getPastCpuMonitorData.htm',
// startTime endtime 是偽數(shù)據(jù)，時(shí)間在后臺(tái)獲取
data: "hostName=" + "login.cheos.cn",
success: function(result){
for (key in result) {
// 去得到時(shí)間轉(zhuǎn)化為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: '時(shí)間',
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min : (currentTime -1000 * 60 * 60),
max: (currentTime),
// 橫（縱）坐標(biāo)顯示的最小值
// ticks:['']
},
yaxis: {
label: 'cpu監(jiān)控',
}
},
highlighter: {
show: true,
sizeAdjust : 7.5
},
cursor: {
show: false
}
});
</span>
},
error: function(textStatus){
alert("獲取監(jiān)控信息失敗!");
}
});
//獲取歷史cpu數(shù)據(jù)ajax結(jié)束
},
error: function(textStatus){
alert("取歷史cpu數(shù)據(jù)時(shí)候獲取服務(wù)器時(shí)間失敗!");
}
});
}
function updateCpuPic() {
console.log("正在更新cpu視圖");
//先取得服務(wù)器時(shí)間，用來(lái)畫(huà)橫坐標(biāo)
$.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("獲取到服務(wù)器時(shí)間："+result+"------"+transferTime);
//操作圖表
//如果已經(jīng)存在圖表，則摧毀
if (plot) {
// plot.destory();
$("#cpuHistory").unbind();
$("#cpuHistory").empty();
plot= null;
}
//重新畫(huà)圖表
plot= $.jqplot('cpuHistory',[ past_cpu_service_statistics_line ], {
axes: {
xaxis: {
label: '時(shí)間',
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%Y-%#m-%d %H:%M'
},
min: (result - 1000 * 60 * 60),
max: (result),
// 橫（縱）坐標(biāo)顯示的最小值
// ticks:['']
},
yaxis: {
label: 'cpu監(jiān)控',
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
},
replot: {
resetAxes: true
}
});
},
error: function(textStatus){
alert("獲取服務(wù)器時(shí)間失敗!");
}
});
}
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){
// 更新一次數(shù)據(jù)
for (key in result) {
var intKey = parseInt(key);
var transferTime = new Date(intKey);
console.log("----------------更新cpu信息---:" + key + "----更新時(shí)間:" + transferTime);
var onePoint = [transferTime, result[key] ];
past_cpu_service_statistics_line.push(onePoint);
}
// 更新圖表
// updateCpuPic();
},
error: function(textStatus){
alert("更新cpu信息失敗!");
}
});
}
