django使用pyecharts(5)----django加入echarts_增量更新_定长
五、Django 前后端分离_定时增量更新图表定长数据
1、安装 djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
2、新建一个 Django 项目
$ django-admin startproject pyecharts_django_demo_5
创建一个应用程序
$ python manage.py startapp demo
在 pyecharts_django_demo_5/settings.py 中注册应用程序
# pyecharts_django_demo_5/settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'demo', # <--- app 名称
'rest_framework',
]
在 pyecharts_django_demo_5/urls.py 中新增 'demo.urls'
from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include
urlpatterns = [
path('admin/', admin.site.urls),
url(r'^demo/', include('demo.urls'))
]
3、编写画图 HTML 代码
先在根目录文件夹下新建 templates 文件夹，新建一个 index.html， 定时刷新的核心在于 html 的 setInterval 方法。
文件目录情况
__pycache__ db.sqlite3 demo manage.py pyecharts_django_demo_5 templates
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="bar" style="width:1600px; height:800px;"></div>
<script>
var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
var old_data = [];
$(
function () {
fetchData(chart);
setInterval(getDynamicData, 2000);
}
);
function fetchData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/demo/line",
dataType: "json",
success: function (result) {
var options = result.data;
chart.setOption(options);
old_data = chart.getOption().series[0].data;
}
});
}
function getDynamicData() {
$.ajax({
type: "GET",
url: "http://127.0.0.1:8000/demo/lineUpdate",
dataType: 'json',
success: function (result) {
var options = result.data;
old_data.push([options.name, options.value]);
old_data.shift();
chart.setOption({
series: [{
data: old_data
}],
});
},
});
}
</script>
</body>
</html>
3、编写 Django 和 pyecharts 代码渲染图表
将下列代码保存到 demo/views.py 中
后端代码也需要相应做出改变
编辑 demo/urls.py 文件(没有就新建一个)
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^line/$', views.ChartView.as_view(), name='demo'),
url(r'^lineUpdate/$', views.ChartUpdateView.as_view(), name='demo'),
url(r'^index/$', views.IndexView.as_view(), name='demo'),
]
demo。view.
from django.shortcuts import render
# Create your views here.
import json
from random import randrange
from django.http import HttpResponse
from rest_framework.views import APIView
from pyecharts.charts import Line, Bar
from pyecharts import options as opts
cnt = 0 #定义line初始化时有多少组数据
# Create your views here.
def response_as_json(data):
json_str = json.dumps(data)
response = HttpResponse(
json_str,
content_type="application/json",
)
response["Access-Control-Allow-Origin"] = "*"
return response
def json_response(data, code=200):
data = {
"code": code,
"msg": "success",
"data": data,
}
return response_as_json(data)
def json_error(error_string="error", code=500, **kwargs):
data = {
"code": code,
"msg": error_string,
"data": {}
}
data.update(kwargs)
return response_as_json(data)
JsonResponse = json_response
JsonError = json_error
def line_base() -> Line:
global cnt
cnt = 9
line = (
Line()
.add_xaxis(list(range(cnt + 1)))
.add_yaxis(series_name="", y_axis=[randrange(0, 100) for _ in range(10)])
.set_global_opts(
title_opts=opts.TitleOpts(title="动态数据"),
xaxis_opts=opts.AxisOpts(type_="value",
name="时间",
),
yaxis_opts=opts.AxisOpts(type_="value")
)
.dump_options()
)
return line
def bar_base() -> Bar:
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [randrange(0, 100) for _ in range(6)])
.add_yaxis("商家B", [randrange(0, 100) for _ in range(6)])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
.dump_options()
)
return c
class ChartView(APIView):
def get(self, request, *args, **kwargs):
# print(json.loads(line_base()))
return JsonResponse(json.loads(line_base()))
class ChartViewBar(APIView):
def get(self, request, *args, **kwargs):
return JsonResponse(json.loads(bar_base()))
class ChartUpdateView(APIView):
def get(self, request, *args, **kwargs):
global cnt
cnt = cnt + 1
print({"name": cnt, "value": randrange(0, 100)})
return JsonResponse({"name": cnt, "value": randrange(0, 100)})
class IndexView(APIView):
def get(self, request, *args, **kwargs):
return HttpResponse(content=open("./templates/index.html").read())
4、 运行项目
$ python manage.py runserver
使用浏览器打开 http://127.0.0.1:8000/demo/index 即可访问服务
http://127.0.0.1:8000/demo/line返回json格式的数据
django使用pyecharts(5)----django加入echarts_增量更新_定长的更多相关文章
- django使用pyecharts(6)----django加入echarts_增量更新_定长_坐标轴定长
六.Django 前后端分离_定时增量更新图表(坐标轴定长) 1.安装 djangorestframework linux pip3 install djangorestframework windo ...
- django使用pyecharts(4)----django加入echarts_增量更新
四.Django 前后端分离_定时增量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...
- django使用pyecharts(3)----django加入echarts_定时全量更新
三.Django 前后端分离_定时全量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...
- django使用pyecharts(2)----django加入echarts_前后台分离
二.Django 中使用 pyecharts. 前后端分离 1.安装 djangorestframework linux pip3 install djangorestframework window ...
- django使用pyecharts(1)----django加入echarts
Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...
- [译]Stairway to Integration Services Level 4 - 增量更新数据
在本文中, 我们说下增量更新数据:即将数据源中更新了的数据替换掉目标表中对应的数据. 更新代码 操作之前我们先把目标表e (dbo.Contact). 的数据改掉 Use AdventureWorks ...
- 一个简单的数据增量更新策略（Android / MongoDB / Django)
我在做个人APP - CayKANJI - 的时候遇到一个问题: 如何增量式地把日语汉字数据地从server更新到APP端,即每次用户运行更新操作时,仅仅获取版本号高于本地缓存的内容. 数据格式 为了 ...
- Django项目实践4 - Django网站管理(后台管理员)
http://blog.csdn.net/pipisorry/article/details/45079751 上篇:Django项目实践3 - Django模型 Introduction 对于某一类 ...
- Django项目实践4 - Django站点管理(后台管理员)
http://blog.csdn.net/pipisorry/article/details/45079751 上篇:Django项目实践3 - Django模型 Introduction 对于某一类 ...
随机推荐
- ICEM-带把圆环
原视频下载地址:https://pan.baidu.com/s/1pKSXyR5 密码: dynm
- Java设计模式之一单例模式
什么是单例模式 保证一个系统中的某个类只有一个实例而且该实例易于外界访问.例如Windows界面的任务管理器就可以看做是一个单例. 单例模式的使用场景 需要频繁的进行创建和销毁的对象: 创建对象时耗时 ...
- Flink 之 Data Sink
首先 Sink 的中文释义为: 下沉; 下陷; 沉没; 使下沉; 使沉没; 倒下; 坐下; 所以,对应 Data sink 意思有点把数据存储下来(落库)的意思: Source 数据源 ---- ...
- 京东 PC 首页 2019 改版前端总结 原创： 何Jason,EC,小屁 凹凸实验室 今天
京东 PC 首页 2019 改版前端总结 原创: 何Jason,EC,小屁 凹凸实验室 今天
- Dart接口
/* 和Java一样,dart也有接口,但是和Java还是有区别的. 首先,dart的接口没有interface关键字定义接口,而是普通类或抽象类都可以作为接口被实现. 同样使用implements关 ...
- WPF分析工具
分析WPF程序是理解其行为很重要的一步,市场上有大量现成的WPF程序分析工具,如Snoop,WPFPerf,Perforator和Visual Profiler,其中Perforator和Visual ...
- URL相关的工具类
package com.opslab.util.web; import com.opslab.util.CharUtil;import com.opslab.util.CharsetUtil;impo ...
- 【PHP】 php遍历文件夹文件，获取md5的值
方法: <?php //定义操作目录 $dir = 'D:\phpstudy\WWW\test'; function getDir2($dir) { foreach (glob($dir . ' ...
- Unity 3D网络游戏实战 pdf
Unity 3D网络游戏实战(全) 目录: 掌握Unity3D基本元素 1.1 简单的游戏 1.1.1在场景中创建一个立方体 1.1.2编写可以使立方体运动的程序 1.1.3测试游戏1.1.4总结1. ...
- .Net MVC 标签页
目录 Bootstrap的标签页 适合.Net MVC的标签页 Bootstrap的标签页 下面是Bootstrap的标签页,挺好的,但是用的id,内容是固定的?我不知道怎么变成不同的视图来 < ...