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


Posted in Python onAugust 12, 2019

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

Python 相关文章推荐
Python实现冒泡,插入,选择排序简单实例
Aug 18 Python
JSONLINT:python的json数据验证库实例解析
Nov 28 Python
使用pandas批量处理矢量化字符串的实例讲解
Jul 10 Python
Python封装原理与实现方法详解
Aug 28 Python
python输入整条数据分割存入数组的方法
Nov 13 Python
使用Python+wxpy 找出微信里把你删除的好友实例
Feb 21 Python
Python正则表达式匹配日期与时间的方法
Jul 07 Python
TensorFlow实现从txt文件读取数据
Feb 05 Python
pandas的resample重采样的使用
Apr 24 Python
Flask缓存静态文件的具体方法
Aug 02 Python
django跳转页面传参的实现
Sep 17 Python
python反扒机制的5种解决方法
Feb 06 Python
Flask框架学习笔记之使用Flask实现表单开发详解
Aug 12 #Python
Flask框架学习笔记之表单基础介绍与表单提交方式
Aug 12 #Python
python内存管理机制原理详解
Aug 12 #Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
Aug 12 #Python
python实现图片压缩代码实例
Aug 12 #Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
Aug 12 #Python
一行Python代码过滤标点符号等特殊字符
Aug 12 #Python
You might like
How do I change MySQL timezone?
2008/03/26 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
php修改时间格式的代码
2011/05/29 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
jquery图片切换插件
2015/03/16 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python数据归一化及三种方法详解
2019/08/06 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
法律专业自荐信
2014/06/03 职场文书
法定代表人证明书
2014/11/28 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书