天兔3.8主机监控中添加内存和缓存统计图

一.在/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：在39行后插入如下代码，目的是在详情页中插入两个层，分别用来存放统计内存和缓存的图表：

<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：在241行后插入如下代码，目的是在上面的两个层上分别画内存和缓存统计图（单位是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('avail'); ?>'},{label: '<?php echo $this->lang->line('total'); ?>'}
           //配置参数设置同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: [ "#00CC00", "#EAA228", "#ff5800", "#839557", "#958c12",   
        "#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],  // 默认显示的分类颜色  
    title:{
         text:"<?php echo $cur_host; ?> <?php echo $this->lang->line('swap'); ?> <?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

 

详细指导参考：https://www.cnblogs.com/jingzaixin/p/11867908.html