django+echart数据动态显示的例子
目标：从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数据动态显示的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
django echarts饼图数据动态加载的实例
如下所示: 后台关键代码: data = {} #keys与values分别为该数据的键数组,值的数组.这里循环为字典添加对应键值 for k, v in zip(keys, values): data.update({k: v, },) #最后将数据打包成json格式以字典的方式传送到前端 return render(request, 'index.html', {'data': json.dumps(data)}) 网页(js中)取值关键代码: 1.取值: var kv = new Arra
-
django+echart绘制曲线图的方法示例
声明:请事先到官网下载echarts,另外本文引用了adminlte模板构建前台页面 views: <!-- /.row --> <div class="row"> <div class="col-xs-12"> <!-- interactive chart --> <div class="box box-primary"> <div class="box-header
-
django+echart数据动态显示的例子
目标:从plc采集数据到数据库,利用echart绘制实时动态曲线. 1 思路 - django定时执行任务,将数据推送到echart. - 前端定时读取后端数据,并显示到echart上. 第一种思路貌似走不通,主要考虑第二种方式. 第二种方式首先想到的是利用javascript直接读取数据库,并定时更新echart曲线. 后来了解js只是前端语言,没有访问数据库的能力,因此最后转向ajax. AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 这个正是我
-
基于django传递数据到后端的例子
最近遇到一个问题,前端表单我写了多个按钮,每个按钮通过for循环来给name赋值如下: <input type="button" class="btn btn-info btn-xs" name="{{item.document}}" value="解析" οnclick="Parsefunc(this.name)"> 问题是我想要实现点击哪个按钮就传对应按钮的值到后端,对于我这样的前端新手就比
-
Django ORM实现按天获取数据去重求和例子
我就废话不多说了,大家还是直接看代码吧! def total_data(request): data = request_body(request, 'POST') if not data: return http_return(400, '参数错误') # 前端传入毫秒为单位的时间戳 startTimestamp = data.get('startTime', '') endTimestamp = data.get('endTime', '') if startTimestamp and en
-
Django页面数据的缓存与使用的具体方法
为什么要使用缓存? 一个动态网站的基本权衡点就是,它是动态的. 每次用户请求页面,服务器会重新计算.从开销处理的角度来看,这比你读取一个现成的标准文件的代价要昂贵的多 使用缓存,将多用户访问时基本相同的数据先缓存起来:这样当用户访问页面的时候,不需要重新计算数据,而是直接从缓存里读取,避免性能上的开销. 使用Redis数据库 使用redis数据库存储缓存,首先redis是key-value类型的数据库,NoSQL,且也是内存型数据库,redis是将数据加载到内存中,进行操作,并异步将数据备份到硬
-
Matlab使用Plot函数实现数据动态显示方法总结
引子 对于真实系统或者仿真平台,数据是增量式的产生的.Matlab除了强大的矩阵运算外,还具有强大的数据可视化库.由于静态画图的方法较多,本文只针对增量式数据流的动态显示. 本文主要介绍几种Matlab实现数据的动态显示方法.方法主要有两种: hold on 方法 1. 方法介绍 此种方法比较原始,适合于即时数据,原理是先画上一帧,接着保留原始图像,追加下一幀图像,此种方式比较繁琐,涉及画图细节,并且没有完整并连续的Line对象数据.此种方法需要注意的地方是,若想生成连续的线图,则每次plot至
-
python处理csv数据动态显示曲线实例代码
本文研究的主要是python处理csv数据动态显示曲线,分享了实现代码,具体如下. 代码: # -*- coding: utf-8 -*- """ Spyder Editor This temporary script file is located here: C:\Users\user\.spyder2\.temp.py """ """ Show how to modify the coordinate form
-
python中plot实现即时数据动态显示方法
在Matlab使用Plot函数实现数据动态显示方法总结中介绍了两种实现即时数据动态显示的方法.考虑到使用python的人群日益增多,再加上本人最近想使用python动态显示即时的数据,网上方法很少,固总结于此. 示例代码1 import matplotlib.pyplot as plt import numpy as np import time from math import * plt.ion() #开启interactive mode 成功的关键函数 plt.figure(1) t =
-
使用Django搭建web服务器的例子(最最正确的方式)
今晚在Mac OS中搭建web服务器时遇到一点冲突,逛了几个论坛和网站,都说的太片面. 先列出最正确的搭建步骤:(无论你是任何操作系统,或者任何版本,都没毛病) ① 随便找个位置建一个文件夹(比如:Windows下的D盘) ② 打开终端(Windows下是cmd) cd 进入文件夹位置(简单吧) ③ 创建一个虚拟环境(虚拟环境就是磁盘一个位置,为了后续部署到服务器,这也是必须的并且是最正确的一步) ④ 激活虚拟环境 ⑤ 安装Django ⑥ 在Django 中创建一个项目 ⑦ 创建数据库 ⑧ 使
-
详解基于django实现的webssh简单例子
本文介绍了详解基于django实现的webssh简单例子,分享给大家,具体如下: 说明 新建一个 django 程序,本文为 chain. 以下仅为简单例子,实际应用 可根据自己平台情况 进行修改. 打开首页后,需要输入1,后台去登录主机,然后返回登录结果. 正常项目 可以post 主机和登录账户,进行权限判断,然后去后台读取账户密码,进行登录. djang后台 需要安装以下模块 安装后会有一个版本号报错,不影响 channels==2.0.2 channels-redis==2.1.0 amq
-
使用AJAX和Django获取数据的方法实例
前言 使用Django服务网页时,只要用户执行导致页面更改的操作,即使该更改仅影响页面的一小部分,它都会将完整的HTML模板传递给浏览器. 但是如果我们只想更新页面的一部分,则不必完全重新渲染页面-我们可以使用AJAX代替. AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法. 现代JavaScript包含fetch API,该API为我们提供了一种纯JavaScript方式来发送AJAX请求. 让我们看一下如何通过获取发出GET和POST请求