一.在/opt/lampp/htdocs/lepus/application/controllers/lp_os.php 文件中添加，目的是让chart_reslut中有内存数据mem_total、mem_avail、mem_cached、swap_total、swap_avail (名字对应数据库中 os_status_history表中 相应的字段名)：
在181行后处插入如下代码：
$chart_reslut[$i]['mem_total'] = $dbdata['mem_total'];
$chart_reslut[$i]['mem_avail'] = $dbdata['mem_avail'];
$chart_reslut[$i]['mem_cached'] = $dbdata['mem_cached'];
$chart_reslut[$i]['swap_total'] = $dbdata['swap_total'];
$chart_reslut[$i]['swap_avail'] = $dbdata['swap_avail'];
二、在/opt/lampp/htdocs/lepus/application/views/os/chart.php中插入代码
插入代码1：在42行插入如下代码，目的是在详情页中插入两个层，分别用来存放统计内存和缓存的图表：
<div id="memory" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div> <div id="swap" style="margin-top:5px; margin-left:10px; width:96%; height:300px; "></div>
插入代码2：在149行后插入如下代码，目的是在对应的层上分别画内存和统计图（单位是KB）：
//memory start
$(document).ready(function(){
var data1=[
<?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
["<?php echo $item['time']?>", <?php echo $item['mem_cached']?> ],
<?php }}else{ ?>
[]
<?php } ?>
];
var data2=[
<?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
["<?php echo $item['time']?>", <?php echo $item['mem_total']?> ],
<?php }}else{ ?>
[]
<?php } ?>
];
var data3=[
<?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
["<?php echo $item['time']?>", <?php echo $item['mem_avail']?> ],
<?php }}else{ ?>
[]
<?php } ?>
];
var plot1 = $.jqplot('memory', [data1,data2,data3], {
seriesDefaults: {
show: true, // 设置是否渲染整个图表区域（即显示图表中内容）
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // 用于显示在分类名称框中的分类名称
color: '', // 分类在图标中表示（折现，柱状图等）的颜色
lineWidth: 1.5, // 分类图（特别是折线图）宽度
shadow: true, // 各图在图表中是否显示阴影区域
shadowAngle: 45, // 参考grid中相同参数
shadowOffset: 1.25, // 参考grid中相同参数
shadowDepth: 3, // 参考grid中相同参数
shadowAlpha: 0.1, // 参考grid中相同参数
showLine: true, //是否显示图表中的折线（折线图中的折线）
showMarker: false, // 是否强调显示图中的数据节点
fill: false, // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend
rendererOptions: {
smooth: true,
}
},
series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性
//eg.设置各个分类在分类名称框中的分类名称
{label: '<?php echo $this->lang->line('cached'); ?>'},{label: '<?php echo $this->lang->line('total'); ?>'},{label: '<?php echo $this->lang->line('avail'); ?>'}
//配置参数设置同seriesDefaults
],
legend: {
show: true, //设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）
label:'123',
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分类名称框距图表区域上边框的距离（单位px）
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px)
background:'', //分类名称框距图表区域背景色
textColor:'' //分类名称框距图表区域内字体颜色
},
seriesColors: [ "#ff5800", "#EAA228", "#00CC00", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色
title:{
text:"<?php echo $cur_host; ?> <?php echo $this->lang->line('memory'); ?> <?php echo $this->lang->line('chart'); ?>",
show:true,
fontSize:'13px',
textColor:'#666',
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:"<?php echo $chart_option['formatString']; ?>"},
tickInterval:"",
label: "",
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{ suffix: '' }
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: '',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
},
cursor:{
show: true,
zoom: true
}
});
});
//memoey end
//swap start
$(document).ready(function(){
var data1=[
<?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
["<?php echo $item['time']?>", <?php echo $item['swap_avail']?> ],
<?php }}else{ ?>
[]
<?php } ?>
];
var data2=[
<?php if(!empty($chart_reslut)) { foreach($chart_reslut as $item){ ?>
["<?php echo $item['time']?>", <?php echo $item['swap_total']?> ],
<?php }}else{ ?>
[]
<?php } ?>
];
var plot1 = $.jqplot('swap', [data1,data2], {
seriesDefaults: {
show: true, // 设置是否渲染整个图表区域（即显示图表中内容）
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // 用于显示在分类名称框中的分类名称
color: '', // 分类在图标中表示（折现，柱状图等）的颜色
lineWidth: 1.5, // 分类图（特别是折线图）宽度
shadow: true, // 各图在图表中是否显示阴影区域
shadowAngle: 45, // 参考grid中相同参数
shadowOffset: 1.25, // 参考grid中相同参数
shadowDepth: 3, // 参考grid中相同参数
shadowAlpha: 0.1, // 参考grid中相同参数
showLine: true, //是否显示图表中的折线（折线图中的折线）
showMarker: false, // 是否强调显示图中的数据节点
fill: false, // 是否填充图表中折线下面的区域（填充颜色同折线颜色）以及legend
rendererOptions: {
smooth: true,
}
},
series:[//如果有多个分类需要显示，这在此处设置各个分类的相关配置属性
//eg.设置各个分类在分类名称框中的分类名称
{label: '<?php echo $this->lang->line('cached'); ?>'},{label: '<?php echo $this->lang->line('total'); ?>'},{label: '<?php echo $this->lang->line('avail'); ?>'}
//配置参数设置同seriesDefaults
],
legend: {
show: true, //设置是否出现分类名称框（即所有分类的名称出现在图的某个位置）
label:'123',
location: 'ne', // 分类名称框出现位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // 分类名称框距图表区域上边框的距离（单位px）
yoffset: 12, // 分类名称框距图表区域左边框的距离(单位px)
background:'', //分类名称框距图表区域背景色
textColor:'' //分类名称框距图表区域内字体颜色
},
seriesColors: [ "#ff5800", "#EAA228", "#00CC00", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // 默认显示的分类颜色
title:{
text:"<?php echo $cur_host; ?> <?php echo $this->lang->line('memory'); ?> <?php echo $this->lang->line('chart'); ?>",
show:true,
fontSize:'13px',
textColor:'#666',
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:"<?php echo $chart_option['formatString']; ?>"},
tickInterval:"",
label: "",
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{ suffix: '' }
}
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: '',
sizeAdjust: 7.5 , tooltipLocation : 'ne'
},
cursor:{
show: true,
zoom: true
}
});
});
//swap end