四、Django 前后端分离_定时增量更新图表
1、安装 djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
2、新建一个 Django 项目
$ django-admin startproject pyecharts_django_demo_4
创建一个应用程序

$ python manage.py startapp demo
在 pyecharts_django_demo_4/settings.py 中注册应用程序

# pyecharts_django_demo_4/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_4/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_4 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:8004/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:8004/demo/lineUpdate",
dataType: 'json',
success: function (result) {
var options = result.data;
old_data.push([options.name, options.value]);
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"),
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):
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:8004/demo/index 即可访问服务
http://127.0.0.1:8004/demo/line返回json格式的数据

django使用pyecharts(4)----django加入echarts_增量更新的更多相关文章

  1. django使用pyecharts(6)----django加入echarts_增量更新_定长_坐标轴定长

    六.Django 前后端分离_定时增量更新图表(坐标轴定长) 1.安装 djangorestframework linux pip3 install djangorestframework windo ...

  2. django使用pyecharts(5)----django加入echarts_增量更新_定长

    五.Django 前后端分离_定时增量更新图表定长数据 1.安装 djangorestframework linux pip3 install djangorestframework windows ...

  3. django使用pyecharts(3)----django加入echarts_定时全量更新

    三.Django 前后端分离_定时全量更新图表 1.安装 djangorestframework linux pip3 install djangorestframework windows pip ...

  4. django使用pyecharts(2)----django加入echarts_前后台分离

    二.Django 中使用 pyecharts. 前后端分离 1.安装 djangorestframework linux pip3 install djangorestframework window ...

  5. django使用pyecharts(1)----django加入echarts

    Django 中使用 pyecharts.一.普通django加入echarts Django 模板渲染 Step 0: 新建一个 Django 项目 $ django-admin startproj ...

  6. 一个简单的数据增量更新策略（Android / MongoDB / Django)

    我在做个人APP - CayKANJI - 的时候遇到一个问题: 如何增量式地把日语汉字数据地从server更新到APP端,即每次用户运行更新操作时,仅仅获取版本号高于本地缓存的内容. 数据格式 为了 ...

  7. Django项目实践4 - Django网站管理(后台管理员)

    http://blog.csdn.net/pipisorry/article/details/45079751 上篇:Django项目实践3 - Django模型 Introduction 对于某一类 ...

  8. Django项目实践4 - Django站点管理(后台管理员)

    http://blog.csdn.net/pipisorry/article/details/45079751 上篇:Django项目实践3 - Django模型 Introduction 对于某一类 ...

  9. Django学习之六：Django 常用模块导入记忆

    Django 常用模块导入记忆 django相关 1. urls相关操作 from django.urls import path, re_path, include from django.urls ...

随机推荐

  1. springMvc---WebMvcConfigurationSupport

    该类提供了主要的 MVC 配置方法,通过直接继承 WebMvcConfiguration ,并在继承类上 加上 @EnableWebMvc 和 @Configuration 注解之后.便可以在子类中实 ...

  2. ubuntu之路——day7.4 梯度爆炸和梯度消失、初始化权重、梯度的数值逼近和梯度检验

    梯度爆炸和梯度消失: W[i] > 1:梯度爆炸(呈指数级增长) W[i] < 1:梯度消失(呈指数级衰减) *.注意此时的1指单位矩阵,W也是系数矩阵 初始化权重: np.random. ...

  3. cmd命令net和sc

    来看windows中启动和关闭服务的方法:在cmd下可有两种方法打开,分别是net和sc. 1.net用于打开没有被禁用的服务, NET命令是功能强大的以命令行方式执行的工具. 它包含了管理网络环境. ...

  4. fork 可能导致subprocess崩溃

    https://docs.python.org/zh-cn/3/library/multiprocessing.html 在 3.8 版更改: 对于 macOS,spawn 启动方式是默认方式. 因为 ...

  5. ArcPy地理处理工具案例教程—批量添加栅格数据

    ArcPy地理处理工具案例教程-批量添加栅格数据 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 关键字: Arcpy,python,地理处理工 ...

  6. System.Net.FtpWebRequest.cs

    ylbtech-System.Net.FtpWebRequest.cs 实现文件传输协议(FTP)客户端. 1.返回顶部 1. #region 程序集 System, Version=4.0.0.0, ...

  7. 从0开始学爬虫8使用requests/pymysql和beautifulsoup4爬取维基百科词条链接并存入数据库

    从0开始学爬虫8使用requests和beautifulsoup4爬取维基百科词条链接并存入数据库 Python使用requests和beautifulsoup4爬取维基百科词条链接并存入数据库 参考 ...

  8. Python 保存数据的方法：

    open函数保存 使用with open()新建对象 写入数据(这里使用的是爬取豆瓣读书中一本书的豆瓣短评作为例子) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  9. 如何固定table表格宽度，样式不受容器影响

    之前有篇关于LODOP打印超文本表格,两个样式相同的表格,出现错位的情况.该博文地址:LODOP打印表格错位的几种情况该文试验了两种现象,第一种浏览器页面显示错位,打印预览也错位,第二种浏览器页面表格 ...

  10. 未处理的异常：system.io.file load exception:无法加载文件或程序集“ 。。。。 找到的程序集的清单定义与程序集引用不匹配。

    问题描述: 添加控制器的时候,突然就报了这个错: Unhandled Exception: System.IO.FileLoadException: Could not load file or as ...