jquery 时间cpu曲线图使用

方法说明：datalist是json的一个二维数组。


/**
* 画曲线图共通方法
*/
function getCPULine(dataList,cureType,target){
var dataArray = [];
var hostNames = [];
var hostDatas = [];
for (var i = 0; i < dataList.length; i++) {
var tmplist = dataList[i];
var hostLen = parseInt(tmplist.metricsnum,10);
var hostIndex = parseInt(tmplist.metricsindex,10);
if(hostIndex == 0){
hostDatas = [];
}
if (hostIndex < hostLen){
var time = tmplist.created;
//将时间加8小时，否则flot显示与当前时间差8小时.
var date = new Date();
date.setTime(time);
date = new Date(date.setHours(date.getHours()+8));
var atmp = date.getTime();
var util;
if ((cureType == "cpu")||(cureType == "CPU")){
util = tmplist.cpuutility;
} else {
util = tmplist.memutility;
}
var tmp = [];
tmp.push(atmp,util);
hostDatas.push(tmp);
}
if(hostIndex == (hostLen -1)){
hostNames.push(tmplist.name);
dataArray.push(hostDatas);
}
}
var tmpData = [];
for(var i=0;i<dataArray.length;i++){
var tmp = {
label:hostNames[i],
data:dataArray[i]};
tmpData.push(tmp);
}
// 控制选项，参考API.txt
var opt ={
points:{show:true},
lines:{show:true, lineWidth: 1},
selection: { mode: "x" },
yaxis: {max: 100,min:0},
xaxis: {mode:"time", timeformat: "%y/%m/%d %H:%M", minTickSize: [1, "minute"]},
legend:{position: "ne", backgroundColor:"#ff0"},// "ne" or "nw" or "se" or "sw"
grid: {backgroundColor: { colors: ["#5a6", "#999"] },clickable: true, hoverable:true}
};
// $.plot($("#flotChart"), tmpData, opt);
$.plot(target, tmpData, opt);
}


以下是画一个空数据的表的cpu曲线图
/**
* 空数据时曲线图共通方法
*/
function getNullDataChart(target){
var dataArray = [];
var hostNames = [];
var hostDatas = [];
var date = new Date();
date = new Date(date.setHours(date.getHours()+7));
for (var i = 0; i < 5; i++) {
var atmp = date.getTime() + i * 60*1000*12;
var tmp = [];
tmp.push(atmp,null);
hostDatas.push(tmp);
}
//将时间加8小时，否则flot显示与当前时间差8小时.
dataArray.push(hostDatas);
var tmp = {data:dataArray[0]};
var tmpData = [];
tmpData.push(tmp);
var opt ={
selection: { mode: "x" },
yaxis: {max: 100,min:0},
xaxis: {mode:"time", timeformat: "%y/%m/%d %H:%M", minTickSize: [1, "minute"]},
legend:{position: "ne", backgroundColor:"#ff0"},// "ne" or "nw" or "se" or "sw"
grid: {backgroundColor: { colors: ["#5a6", "#999"] },clickable: true, hoverable:true}
};
// $.plot($("#flotChart"), tmpData, opt);
$.plot(target, tmpData, opt);
}