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装饰器 免去调用父类构造函数的麻烦
May 18 Python
基于进程内通讯的python聊天室实现方法
Jun 28 Python
Python中使用bidict模块双向字典结构的奇技淫巧
Jul 12 Python
使用Python对Access读写操作
Mar 30 Python
完美解决安装完tensorflow后pip无法使用的问题
Jun 11 Python
Python实现App自动签到领取积分功能
Sep 29 Python
pyqt 实现为长内容添加滑轮 scrollArea
Jun 19 Python
Django forms表单 select下拉框的传值实例
Jul 19 Python
Django用户认证系统 Web请求中的认证解析
Aug 02 Python
python多线程扫描端口(线程池)
Sep 04 Python
Python:slice与indices的用法
Nov 25 Python
python运行脚本文件的三种方法实例
Jun 25 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制作图型计数器的例子
2006/10/09 PHP
php 生成WML页面方法详解
2009/08/09 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
jQuery实现图片走马灯效果的原理分析
2016/01/16 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
Python 中 list 的各项操作技巧
2017/04/13 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python实现名片管理器的示例代码
2019/12/17 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python小白学习包管理器pip安装
2020/06/09 Python
零基础小白多久能学会python
2020/06/22 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
禁毒宣传工作方案
2014/05/23 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
2016年端午节寄语
2015/12/04 职场文书
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang