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能接受的对象参数。