JQuery和flot插件结合动态显示服务器CPU及内存状态

最新推荐文章于 2018-10-31 11:30:37 发布

原创最新推荐文章于 2018-10-31 11:30:37 发布 · 322 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #json #ViewUI

本文详细介绍了如何使用JSP和JavaScript实现动态绘制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能接受的对象参数。