django+echart数据动态显示的例子

更新时间：2020-07-23 17:06:01 作者：startmvc

目标：从plc采集数据到数据库，利用echart绘制实时动态曲线。1思路-django定时执行任务，将

目标：从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" οnclick="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图表。

以上这篇django+echart数据动态显示的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。