JQuery和flot插件结合动态显示服务器CPU及内存状态
JSP代码：
<div><div id="cpuChart"style="width: 312px; height: 100px; float: left; margin: 0px; border: solid black 1px;"></div><span>CPU&Mem</span></div>?
JS:
var options = { series: { color: '#0ff' }, yaxis: { min:0, show: false }, xaxis: { show: false }, grid: { show: false} };var cpuBuf = [], memBuf = [], totalPoints = 104;$('#cpuChart').everyTime('2ds', 'monitor', function(){$.ajax({type: "post",url: '<%=request.getContextPath()%>/monitor',dataType : "json",success : function(result) {if (cpuBuf.length > totalPoints)cpuBuf = cpuBuf.slice(cpuBuf.length-totalPoints);if (memBuf.length > totalPoints)memBuf = memBuf.slice(memBuf.length-totalPoints);cpuBuf.push(result.cpuUsage);memBuf.push(result.memUsage); var cpuArr = [], memArr = []; for (var i = 0; i<cpuBuf.length; i++){ cpuArr.push([i, cpuBuf[i]]); memArr.push([i, memBuf[i]]); } var cpuData = [{data: cpuArr, color: '#0f0'},{data: memArr, color: '#00f'}]; $.plot($("#cpuChart"), cpuData, options);}});}, 0, true);?
最关键的地方是绘制前数组参数的传入：
var cpuBuf = [], memBuf = [], totalPoints = 104;
?这里定义了基本的cpu和内存占用率的一维数组。
?
var cpuArr = [], memArr = [];for (var i = 0; i<cpuBuf.length; i++){cpuArr.push([i, cpuBuf[i]]);memArr.push([i, memBuf[i]]);}?这里将一维数组变为二维数组，加了下标用做x轴。
?
var cpuData = [{data: cpuArr, color: '#0f0'},{data: memArr, color: '#00f'}];?然后转换为plot能接受的对象参数。
?
?