天兔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：在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：在148行后插入如下代码，目的是在上面的两个层上分别画内存和缓存统计图（单位是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 } ?>
];

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

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

猜你喜欢