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数据动态显示的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。