通过linux完成web端动态监控图

今天药忘吃喽~ 2022-02-28 13:24 157阅读 0赞

转载自[https://blog.csdn.net/sinat\_38068807/article/details/88726176][https_blog.csdn.net_sinat_38068807_article_details_88726176]

# 1、需要先创建好linux环境目录 #

如树状图所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MDY4ODA3_size_16_color_FFFFFF_t_70][]

tree命令查看当前目录结构，若tree没用，则说明没安装，执行 yum install tree安装就好了

# 2、创建树形用到的命令 #

（1）mkdir 文件夹名       ——》创建文件夹

（2）vim 文件名 ——》创建或编辑文件

# 3、index.html中的内容 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>chart</title>
        <script src="static/jquery-3.1.1.min.js"></script>
        <script src="static/Chart.min.js"></script>
    </head>
    <body>
        <canvas id="panel" height="330px" width="1000px">
        </canvas>
        <script>
            $(
                function(){
                    var can = $("#panel").get(0).getContext("2d")
                    var canData = {
                        labels : ["a","b","c","d","e","f","g","h"],
                        datasets : [
                                {
                                    fillColor:"rgba(255,0,0,0.2)",
                                    strokeColor:"rgba(255,0,0,1)",
                                    data:[1,444,5,6,3,4,3,49,5]
                                }
                        ]
                    };
                    var line = new Chart(can).Line(canData);
                    var int = setInterval(
                        function () {
                            $.ajax(
                                {
                                    url : "cgi-bin/setData.py",
                                    type : "get",
                                    data :'',
                                    success: function(data){
                                        time = data['time'];
                                        console.log('1')
                                        num = data['num'];
                                        console.log('2')
                                        line.addData(
                                            [num],
                                            time
                                        );
                                        var len = line.datasets[0].points.length;
                                        if(len > 8){
                                            line.removeData()
                                        }
     
                                    },
                                    error : function (error) {
                                        console.log(error)
     
                                    }
                                }
                            )
     
                        },1000
                    )
     
                }
            )
          </script>
    </body>
    </html>

setData.py中的内容：

import json
    import time
    import random
     
    num = random.randint(1, 10)
    times = time.strftime("%H:%M:%S", time.localtime())
     
    result = json.dumps({"time": times, "num": num})
     
    print("Content-type:application/json")
    print("\n")
    print(result)

4、在myjson文件夹输入命令 python3 -m http.server --cgi 90 将myjson目录加载到cgi。这样，我们才能通过ip和端口访问

index.html实现目的：（我这目录项只有一个.html文件即index.html所以直接执行了）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MDY4ODA3_size_16_color_FFFFFF_t_70 1][]

[https_blog.csdn.net_sinat_38068807_article_details_88726176]: https://blog.csdn.net/sinat_38068807/article/details/88726176
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MDY4ODA3_size_16_color_FFFFFF_t_70]: /images/20220228/4264d608e05d4d39964b62ba971b1006.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM4MDY4ODA3_size_16_color_FFFFFF_t_70 1]: /images/20220228/20d93532f50e46fd9b0d2dac710a1f06.png