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 相关文章推荐
在Django的URLconf中使用多个视图前缀的方法
Jul 18 Python
python实现按行切分文本文件的方法
Apr 18 Python
Python去除、替换字符串空格的处理方法
Apr 01 Python
Python实现按中文排序的方法示例
Apr 25 Python
bluepy 一款python封装的BLE利器简单介绍
Jun 25 Python
使用WingPro 7 设置Python路径的方法
Jul 24 Python
python-序列解包(对可迭代元素的快速取值方法)
Aug 24 Python
使用python实现多维数据降维操作
Feb 24 Python
Python 实现使用空值进行赋值 None
Mar 12 Python
详解pytorch tensor和ndarray转换相关总结
Sep 03 Python
基于python实现百度语音识别和图灵对话
Nov 02 Python
python的列表生成式,生成器和generator对象你了解吗
Mar 16 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下对数组进行排序的函数
2010/08/08 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JS原生带小白点轮播图实例讲解
2017/07/22 Javascript
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python中kmeans聚类实现代码
2018/02/23 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
工商企业管理应届生求职信
2013/11/03 职场文书
物业保安主管岗位职责
2013/12/25 职场文书
社会实践心得体会
2014/01/03 职场文书
学籍证明模板
2014/11/21 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
学生自我评语
2015/01/04 职场文书
打架检讨书
2015/01/27 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书