django+echart数据动态显示的例子
更新时间：2019年08月12日 12:01:23 作者：inch2006
今天小编就为大家分享一篇django+echart数据动态显示的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
目标：从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数据动态显示的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
pandas.DataFrame.mask方法提供了一种灵活的方式来根据条件筛选和替换 DataFrame中的元素,本文主要介绍了pandas DataFrame mask的具体使用,具有一定的参考价值,感兴趣的可以了解一下2025-04-04
本篇文章给大家总结了python操作redis的实际方法和实例代码，有兴趣的朋友参考学习下。2018-06-06
这篇文章主要介绍了python3 与python2 异常处理的区别与联系的相关资料,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了Python安装并操作redis实现流程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
使用Python paramiko模块利用多线程实现ssh并发执行操作
ssh是一个协议，OpenSSH是其中一个开源实现，paramiko是Python的一个库，实现了SSHv2协议(底层使用cryptography)。这篇文章主要介绍了使用Python paramiko模块利用多线程实现ssh并发执行操作,需要的朋友可以参考下2019-12-12
今天小编就为大家分享一篇python3 实现一行输入,空格隔开的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了如何使用virtualenv管理python环境,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
今天小编就为大家分享一篇python中计算一个列表中连续相同的元素个数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-06-06
这篇文章介绍了Python列表去重的几种方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
jieba库的作用主要用于中文分词,是一种不错的中文分词组件,下面这篇文章主要给大家介绍了关于Python jieba库安装的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
最新评论