如何最好地使用它?
可以用jquery图表表示CPU的使用情况吗?
我想到了jquery Flot。
如何让图形自动更新?
希望你能给我一些提示。
问候
我的尝试,不幸的是他只选择随机值 加工区域:
<?php
function get_server_cpu_usage(){
$load = sys_getloadavg();
return $load[0];
}
?>
<script>
$(function() {
var data1 = [];
var totalPoints = 300;
function GetData() {
data1.shift();
while (data1.length < totalPoints) {
var prev = data1.length > 0 ? data1[data1.length - 1] : 50;
var y = prev + <?=get_server_cpu_usage()?> * 10 - 5;
y = y < 0 ? 0 : (y > 100 ? 100 : y);
data1.push(y);
}
var result = [];
for (var i = 0; i < data1.length; ++i) {
result.push([i, data1[i]])
}
return result;
}
var updateInterval = 100;
var plot = $.plot($("#reatltime-chart #reatltime-chartContainer"), [
GetData()], {
series: {
lines: {
show: true,
fill: true
},
shadowSize: 0
},
yaxis: {
min: 0,
max: 100,
ticks: 10
},
xaxis: {
show: false
},
grid: {
hoverable: true,
clickable: true,
tickColor: "#f9f9f9",
borderWidth: 1,
borderColor: "#eeeeee"
},
colors: ["#79D1CF"],
tooltip: true,
tooltipOpts: {
defaultTheme: false
}
});
function update() {
plot.setData([GetData()]);
plot.draw();
setTimeout(update, updateInterval);
}
update();
});
</script>
答案 0 :(得分:0)
我不知道如何处理jquery,但使用php和css我们可以做到这一点
(希望这是你要问的)
<style>
.showbar {
width: 8px;
margin: 1px;
display: inline-block;
position: relative;
background-color: #aeaeae;
vertical-align: baseline;
}
</style>
<?php
$load = sys_getloadavg();//normally sometimes you'll get float points lessthan 1 so to show these values in bar just some value to make it positive so that you can see the bar
echo '<div style="height: '.($load[0]).
'em;" class="showbar"></div>'.($load[1]).
'<div style="height: '.($load[2]).
' class="showbar"></div>';
?>
示例输出