标签：function response Django Ajax time var 图形 recv cpu

Ajax动态图形监控: 通过使用前端轮询的方式实现对主机动态图形监控.

先来定义index.html前端绘图代码.

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js" type="text/javascript"></script>

<!--定义绘图区域-->
<div id="main" style="height:300px;width:80%;border:1px solid #eecc11;padding:10px;"></div>

<!--调用百度的绘图库,进行图片的绘制工作.-->
<script type="text/javascript" charset="UTF-8">
    var display = function(time,cpu) {
        var main = echarts.init(document.getElementById(("main")));
        var option = {
            xAxis: {
                boundaryGap:false,
                boundaryGap:false,
                type: 'category',
                data: time
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                type: 'line',
                areaStyle:{},
                data: cpu
            }]
        };
        main.setOption(option,true);
    };
</script>

<!--update()函数具体执行的任务,其主要只保留前十条数据.-->
<script type="text/javascript" charset="UTF-8">
    // 负责对参数的解析
    var time =["","","","","","","","","",""];
    var cpu = [0,0,0,0,0,0,0,0,0,0];
    var update = function(recv){
        time.push(recv.response[0]);
        cpu.push(parseFloat(recv.response[1]));
        if(time.length >=10){
            time.shift();
            cpu.shift();
            console.log("处理后的时间数据:" + time);
            console.log("处理后的CPU数据:" + cpu);
            display(time,cpu)  // 调用绘图函数
        }
    };
</script>

<!--设定一个定时器,每隔1000毫秒向后端发送请求-->
<script type="text/javascript">
    $(
        function () {
            fetchData();
            setInterval(fetchData, 1000);
        }
    );
    function fetchData(){
        $.ajax({
            url:"/_ajax/",
            type:"GET",
            dataType: 'json',
            success:function (recv) {
                console.log("获取到时间:" + recv.response[0]);
                console.log("获取到数据:" + recv.response[1]);
                update(recv)      // 传递给处理函数
            }
        })
    }
</script>

后端views.py视图层则是返回本机的实时数据给前台即可.

from django.shortcuts import render,HttpResponse
import json,psutil,time

def index(request):
    return render(request,"index.html")

def _ajax(request):
    if request.method == "GET":
        times = time.strftime("%M:%S",time.localtime())
        data = psutil.cpu_percent(interval=None,percpu=True)
        return HttpResponse(json.dumps({"response":[times,data]}))

Ajax轮询多个图形: 我们来实现一次性绘制多个图形的方法,代码只是在上方改进一下即可.

前端部分index.html分别绘制两个仪表盘,并封装好绘图方法.

<script src="https://cdn.lyshark.com/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.lyshark.com/echarts/5.0.0/echarts.min.js"></script>

<div id="cpuChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>
<div id="memChart" style="width: 20%; height: 300px; border: 1px solid #dddddd; float:left; margin-right: 8px;"></div>

<!--封装方法,一次性绘制两个图形-->
<script type="text/javascript" charset="UTF-8">
    var display = function(cpu,mem) {
        var cpuChart = echarts.init(document.getElementById("cpuChart"));
        var option = {
        series: [
            {
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: cpu, name: 'CPU'}]
            }
        ]
    };cpuChart.setOption(option, true);

        var memChart = echarts.init(document.getElementById("memChart"));
        var option = {
        series: [
            {
                type: 'gauge',
                detail: {formatter: '{value}%'},
                data: [{value: mem, name: 'Mem'}]
            }
        ]
    };memChart.setOption(option, true);
};
</script>

<!--定义轮巡-->
<script type="text/javascript">
    $(
        function () {
            fetchData();
            setInterval(fetchData, 500);
        }
    );
    function fetchData(){
        $.ajax({
            url:"/_ajax/",
            type:"GET",
            dataType: 'json',
            success:function (recv) {
                display(recv.response[0],recv.response[1]);
            }
        })
    }
</script>

后台views.py则是动态获取获取图形并轮询传递到前端.

from django.shortcuts import render,HttpResponse
import json,psutil

def index(request):
    return render(request, "index.html")

def ajax(request):
    if request.method == "GET":
        mem = psutil.virtual_memory()
        cpu = psutil.cpu_percent()
        return HttpResponse(json.dumps({"response":[cpu,mem.percent]}))

标签：function,response,Django,Ajax,time,var,图形,recv,cpu
来源： https://www.cnblogs.com/LyShark/p/15511971.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。