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  __getattr__与__setattr__使用方法
Sep 06 Python
微信 用脚本查看是否被微信好友删除
Oct 28 Python
window下eclipse安装python插件教程
Apr 24 Python
Pandas标记删除重复记录的方法
Apr 08 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
Dec 07 Python
Python Numpy库安装与基本操作示例
Jan 08 Python
python实现在cmd窗口显示彩色文字
Jun 24 Python
Python实现微信好友的数据分析
Dec 16 Python
Python 从attribute到property详解
Mar 05 Python
TensorFlow2.1.0最新版本安装详细教程
Apr 08 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
Apr 19 Python
python使用XPath解析数据爬取起点小说网数据
Apr 22 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服务器实现多session并发运行
2006/10/09 PHP
php数据库抽象层 PDO
2011/05/07 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
sina的lightbox效果。
2007/01/09 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
bootstrap提示标签、提示框实现代码
2016/12/28 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue如何将v-for中的表格导出来
2018/05/07 Javascript
Jquery实现获取子元素的方法分析
2019/08/24 jQuery
原生js实现表格翻页和跳转
2020/09/29 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
python字典多条件排序方法实例
2014/06/30 Python
利用python画出折线图
2018/07/26 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
pycharm设置当前工作目录的操作(working directory)
2020/02/14 Python
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
.NET方向面试题
2014/11/20 面试题
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
品牌推广活动策划方案
2014/08/19 职场文书
共产党员批评与自我批评
2014/10/15 职场文书
见习报告格式范文
2014/11/08 职场文书
模范教师材料大全
2014/12/16 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
教师师德承诺书2016
2016/03/25 职场文书