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

時間 2019-11-24

標籤 django 使用 pyecharts 加入 echarts 增量更新欄目 Python 简体版

原文原文鏈接

5、Django 先後端分離_定時增量更新圖表定長數據
一、安裝 djangorestframework
linux pip3 install djangorestframework
windows pip install djangorestframework
二、新建一個 Django 項目
$ django-admin startproject pyecharts_django_demo_5
建立一個應用程序javascript

$ python manage.py startapp demo
在 pyecharts_django_demo_5/settings.py 中註冊應用程序css

# 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'html

from django.contrib import admin
from django.urls import path
from django.conf.urls import url, includejava

urlpatterns = [
path('admin/', admin.site.urls),
url(r'^demo/', include('demo.urls'))
]python

三、編寫畫圖 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>jquery

</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);
}
);linux

</script>
</body>
</html>
三、編寫 Django 和 pyecharts 代碼渲染圖表
將下列代碼保存到 demo/views.py 中
後端代碼也須要相應作出改變django

編輯 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()) 四、運行項目 $ python manage.py runserver 使用瀏覽器打開 http://127.0.0.1:8000/demo/index 便可訪問服務 http://127.0.0.1:8000/demo/line返回json格式的數據

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。