django+echart数据动态显示

目标：从plc采集数据到数据库，利用echart绘制实时动态曲线。

1 思路

- django定时执行任务，将数据推送到echart。

- 前端定时读取后端数据，并显示到echart上。

第一种思路貌似走不通，主要考虑第二种方式。

第二种方式首先想到的是利用javascript直接读取数据库，并定时更新echart曲线。

后来了解js只是前端语言，没有访问数据库的能力，因此最后转向ajax。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

这个正是我需要的功能。

2、任务分解

- echart动态曲线显示如何实现（官方有例程）

- ajax如何使用（runoob ajax教程）

- django后台数据准备

3、执行

ajax.html

	{% load static %}
	
	
	

	





	


	

		
使用 AJAX 修改该文本内容
	修改内容



	

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图表。