目標：從plc採集資料到資料庫，利用echart繪製即時動態曲線。
1 思路
- django定時執行任務，將資料推送到echart。
- 前端定時讀取後端資料，並顯示到echart上。
第一種思路貌似走不通，主要考慮第二種方式。
第二種方式首先想到的是利用javascript直接讀取資料庫，並定時更新echart曲線。
後來瞭解js只是前端語言，沒有訪問資料庫的能力，因此最後轉向ajax。
AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。
這個正式我需要的功能。
2、任務分解
- echart動態曲線顯示如何?（官方有常式）
- ajax如何使用（runoob ajax教程）
- django後台資料準備
3、執行
ajax.html
<!DOCTYPE html><html><head>{% load static %}<script src="{% static 'myapp/json2.js'%}"></script><script src="{% static 'myapp/echarts.js'%}"></script><script src="{% static 'myapp/matplotlib.js'%}"></script><meta charset="utf-8"></head><body><div id="main" style="background-color:#eceaea; width: 800px; height:600px;"></div><div id="myDiv"><h2>使用 AJAX 修改該常值內容</h2></div><button type="button" onclick="loadXMLDoc()">修改內容</button><script>var json = {{myContext | safe}}var jstr = JSON.stringify(json)var option = JSON.parse(jstr)// console.log(option)<!-- 為ECharts準備一個具備大小（寬高）的Dom -->// 基於準備好的dom，初始化echarts執行個體var myChart = echarts.init(document.getElementById('main'), 'matplotlib');// 使用剛指定的配置項和資料顯示圖表。myChart.setOption(option);function loadXMLDoc() {var xmlhttp;if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼xmlhttp = new XMLHttpRequest();} else {// IE6, IE5 瀏覽器執行代碼xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//content = "{{ myContext }}";//console.log(content)//var json = xmlhttp.responseText;//var jstr = JSON.stringify(json)option = JSON.parse(xmlhttp.responseText)// 使用剛指定的配置項和資料顯示圖表。myChart.setOption(option);//console.log(option);}}xmlhttp.open("GET", "/myapp/mytext", true);xmlhttp.send();}setInterval(loadXMLDoc, 500);</script></body></html>
django背景程式
def mytext(request): #df = pd.read_csv(r'E:\mywebsite\ui\myapp\xx.csv') import random # dfx = pd.DataFrame() # dfx['a'] = ['2017-08-08','2017-08-09','2017-08-10'] # dfx['b'] = [random.random(),random.random(),random.random()] # dfx['c'] = [random.random(),random.random(),random.random()] # # dfx['a'] = pd.to_datetime(dfx.a) # # dfx = dfx.set_index('a') import sqlite3 conn = sqlite3.connect(r"E:\01_Lab\L02_Ads\practise\ads_sample\multi_freq_data\multi_freq_data\bin\x86\Debug\db_all.db") df = pd.read_sql('select * from buffer',conn) df = df.set_index(pd.to_datetime(df.TimeStamp)) dfn = pd.DataFrame() dfn['ws'] = df.grWindSpeed.astype(float) dfn = dfn.tail(500) option = de.eplot(dfn,1) str_option = json.dumps(option) context = {"myContext": str_option} #return render(request,'myapp/a.html',context) return HttpResponse(str_option)def test_ajax(request): import sqlite3 conn = sqlite3.connect(r"E:\01_Lab\L02_Ads\practise\ads_sample\multi_freq_data\multi_freq_data\bin\x86\Debug\db_all.db") df = pd.read_sql('select * from buffer',conn) df = df.set_index(pd.to_datetime(df.TimeStamp)) dfn = pd.DataFrame() dfn['ws'] = df.grWindSpeed.astype(float) dfn = dfn.tail(500) option = de.eplot(dfn,1) str_option = json.dumps(option) context = {"myContext": str_option} #context = {"myContext": {'a':[1,2],'b':[3,4]}} return render(request, 'myapp/ajax.html', context)
前端通過訪問mytext函數擷取到一個字串，通過json.parse()轉為echart對象。
最後，利用js定時功能setInterval(func1,1000)定時功能，定時讀取資料並更新echart圖表。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
