django+echart数据动态显示的例子
目标:从plc采集数据到数据库,利用echart绘制实时动态曲线。
1思路
-django定时执行任务,将数据推送到echart。
-前端定时读取后端数据,并显示到echart上。
第一种思路貌似走不通,主要考虑第二种方式。
第二种方式首先想到的是利用javascript直接读取数据库,并定时更新echart曲线。
后来了解js只是前端语言,没有访问数据库的能力,因此最后转向ajax。
AJAX最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
这个正是我需要的功能。
2、任务分解
-echart动态曲线显示如何实现(官方有例程)
-ajax如何使用(runoobajax教程)
-django后台数据准备
3、执行
ajax.html
{%loadstatic%}
使用AJAX修改该文本内容
django后台程序
defmytext(request): #df=pd.read_csv(r'E:\mywebsite\ui\myapp\xx.csv') importrandom #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') importsqlite3 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*frombuffer',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} #returnrender(request,'myapp/a.html',context) returnHttpResponse(str_option) deftest_ajax(request): importsqlite3 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*frombuffer',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]}} returnrender(request,'myapp/ajax.html',context)
前端通过访问mytext函数获取到一个字符串,通过json.parse()转为echart对象。
最后,利用js定时功能setInterval(func1,1000)定时功能,定时读取数据并更新echart图表。
以上这篇django+echart数据动态显示的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。