1. 首頁 > 生活百科 > >

Flask框架：運用Ajax輪詢動態繪圖( 二 )

生活百科

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

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

文章插圖
這就標志著接收的數據是正確的 ， 我們來看下最終繪制效果；
Flask框架：運用Ajax輪詢動態繪圖

文章插圖
當然有時候我們需要返回多個圖形，而不是一個，運用輪詢同樣可以實現，如下案例中將兩個儀表盤合并在了一起，并通過一個接口實現了數據的輪詢，相比上方代碼變化并不大 。
<!-- # 署名權 # 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]})返回時指定兩個參數即可 。
【Flask框架：運用Ajax輪詢動態繪圖】# 署名權# right to sign one's name on a piece of work# PowerBy: LyShark# Email: me@lyshark.comfrom flask import Flask,render_template,requestimport json,time,randomasync_mode = Noneapp = 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輪詢動態繪圖

文章插圖

推薦閱讀