Flask框架運用Ajax實現輪詢動態繪圖

2022-11-09 14:01:35

Ajax是非同步JavaScript和XML可用於前後端互動，在之前《Flask 框架：運用Ajax實現資料互動》簡單實現了前後端互動，本章將通過Ajax輪詢獲取後端的資料，前臺使用echart繪相簿進行圖形的生成與展示，後臺通過render_template方法返回一串JSON資料集，前臺收到後將其應用到繪相簿上，實現動態監控記憶體利用率的這個功能。

首先LyShark先來演示一下前端如何運用AJAX實現互動，通過$.ajax定義ajax開始標誌，並指定url,type,datetype等資訊，通過setInterval設定一個1000毫秒的定時器，每隔一段時間則去後端取資料。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--設定一個定時器,每隔1000毫秒向後端傳送請求-->
    <script type="text/javascript">
        $(
            function () {
                fetchData();
                setInterval(fetchData, 1000);
            }
        );
        function fetchData(){
            $.ajax({
                url:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    console.log("[lyshark.com] 獲取到時間:" + recv.response[0]);
                    console.log("[lyshark.com] 獲取到資料:" + recv.response[1]);
                }
            })
        }
    </script>
</body>

後端只需要根據前端需要的格式返回系統中的CPU利用率（此處模擬），並使用json.dumps({"response":[times,data]})推播到前端即可。

# 署名權
# right to sign one's name on a piece of work
# PowerBy: LyShark
# Email: me@lyshark.com
from flask import Flask,render_template,request
import json,time,random

async_mode = None

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route('/',methods=['POST','GET'])
def index():
    if request.method == "GET":
        return render_template("index.html")

    elif request.method == "POST":
        times = time.strftime("%M:%S", time.localtime())
        data = [random.randint(1,100)]
        return json.dumps({"response":[times,data]})

if __name__ == '__main__':
    app.run()

執行這段程式碼，然後開啟控制檯，則可以看到如下資料，前臺會每隔一秒向後端請求資料；

如果上方繪製可以被正確執行，那麼想要實現輪詢繪圖只需要封裝實現一個update()自定義繪圖函數，該函數內將得到的資料統一放入到陣列內，並呼叫封裝好的display()函數，將資料繪製到前臺。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--定義繪圖區域-->
    <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:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    console.log("獲取到時間:" + recv.response[0]);
                    console.log("獲取到資料:" + recv.response[1]);
    
                    // 傳遞給處理常式
                    update(recv)
                }
            })
        }
    </script>
</body>

對於後臺來說，我們不需要做任何變更，因為只要我們遵循返回JSON的格式即可，執行替換後的程式，我們可以看到控制檯會出現以下引數；

這就標誌著接收的資料是正確的，我們來看下最終繪製效果；

當然有時候我們需要返回多個圖形，而不是一個，運用輪詢同樣可以實現，如下案例中將兩個儀表盤合併在了一起，並通過一個介面實現了資料的輪詢，相比上方程式碼變化並不大。

<!--
	# 署名權
	# right to sign one's name on a piece of work
	# PowerBy: LyShark
	# Email: me@lyshark.com
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
    <!--定義繪圖區域-->
    <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: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    progress: {
                        show: true
                      },
                    detail: {formatter: '{value} %',fontSize: 12},
                    data: [{value: cpu, name: 'CPU負載'}]
                }
            ]
        };cpuChart.setOption(option, true);

            var memChart = echarts.init(document.getElementById("memChart"));
            var option = {
            series: [
                {
                    name: 'Pressure',
                    type: 'gauge',
                    progress: {
                        show: true
                      },
                    detail: {formatter: '{value} %',fontSize: 12},
                    data: [{value: mem, name: '記憶體利用率'}]
                }
            ]
        };memChart.setOption(option, true);
    };
    </script>

    <!--定義輪巡-->
    <script type="text/javascript">
        $(
            function () {
                fetchData();
                setInterval(fetchData, 100);
            }
        );
        function fetchData(){
            $.ajax({
                url:"/",
                type:"POST",
                dataType: 'json',
                success:function (recv) {
                    display(recv.response[0],recv.response[1]);
                }
            })
        }
    </script>
</body>

後端部分只需要稍微小改一下，將json.dumps({"response":[cpu,mem]})返回時指定兩個引數即可。

# 署名權
# right to sign one's name on a piece of work
# PowerBy: LyShark
# Email: me@lyshark.com
from flask import Flask,render_template,request
import json,time,random

async_mode = None

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route('/',methods=['POST','GET'])
def index():
    if request.method == "GET":
        return render_template("index.html")

    elif request.method == "POST":
        times = time.strftime("%M:%S", time.localtime())
        mem = random.randint(1,100)
        cpu = random.randint(1,100)
        return json.dumps({"response":[cpu,mem]})

if __name__ == '__main__':
    app.run()

框架執行後，在前端可以看到兩個儀表盤分別顯示不同的引數；

到此這篇關於Flask框架運用Ajax實現輪詢動態繪圖的文章就介紹到這了,更多相關Flask Ajax輪詢動態繪圖內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Flask框架運用Ajax實現輪詢動態繪圖

熱門文章