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中函数的用法实例教程
Sep 08 Python
Python读写Excel文件方法介绍
Nov 22 Python
Python实现的文本简单可逆加密算法示例
May 18 Python
python模块之paramiko实例代码
Jan 31 Python
如何用python整理附件
May 13 Python
python读取Excel表格文件的方法
Sep 02 Python
python脚本调用iftop 统计业务应用流量的思路详解
Oct 11 Python
Python3标准库之threading进程中管理并发操作方法
Mar 30 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
Apr 02 Python
为什么相对PHP黑python的更少
Jun 21 Python
python线性插值解析
Jul 05 Python
Python学习之time模块的基本使用
Jan 17 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 ss7.5的数据调用 (笔记)
2010/03/08 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JQuery从头学起第二讲
2010/07/04 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
一个背景云变换js特效 鼠标移动背景云变化
2012/12/28 Javascript
基于jQuery.Validate验证库知识点的详解
2013/04/26 Javascript
jquery统计复选框选中示例
2013/11/05 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
2017/04/10 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
2017/10/09 jQuery
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
python调用外部程序的实操步骤
2019/03/04 Python
Django实现文件上传和下载功能
2019/10/06 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
业务助理岗位职责
2013/11/18 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
工作违纪检讨书
2014/02/17 职场文书
商超业务员岗位职责
2014/03/12 职场文书
2015年实习单位评语
2015/03/25 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS