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 相关文章推荐
python3实现读取chrome浏览器cookie
Jun 19 Python
Python正规则表达式学习指南
Aug 02 Python
python3中set(集合)的语法总结分享
Mar 24 Python
Python实现决策树C4.5算法的示例
May 30 Python
Python简单实现网页内容抓取功能示例
Jun 07 Python
Python3实现的简单三级菜单功能示例
Mar 12 Python
python ---lambda匿名函数介绍
Mar 13 Python
python django下载大的csv文件实现方法分析
Jul 19 Python
pytorch 加载(.pth)格式的模型实例
Aug 20 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
Oct 11 Python
python 实现turtle画图并导出图片格式的文件
Dec 07 Python
Python+unittest+DDT实现数据驱动测试
Nov 30 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
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
验证手机号码的JS方法分享
2013/09/10 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
教你如何在Django 1.6中正确使用 Signal
2014/06/22 Python
Django中处理出错页面的方法
2015/07/15 Python
django之常用命令详解
2016/06/30 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
pycham查看程序执行的时间方法
2018/11/29 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
Python解析json代码实例解析
2019/11/25 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
德国网上药房:Apotal
2017/04/04 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
团队精神演讲稿
2013/12/31 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
暑期学习心得体会
2014/09/02 职场文书
《检阅》教学反思
2016/02/22 职场文书
导游词之台湾安平古堡
2019/12/25 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python