django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法!
Django 模板渲染
1. 新建一个 Django 项目
命令行中输入以下命令
django-admin startproject pyecharts_django_demo
创建一个应用程序
python manage.py startapp demo
创建完之后,在 Pycharm 中打开该项目,当然你也可以直接在 Pycharm 中创建
同时在 pyecharts_django_demo/settings.py
中注册应用程序INSTALLED_APPS
中添加应用程序 demo
在 pyecharts_django_demo/urls.py
中新增 demo.urls
2. 新建项目 urls 文件
编辑 demo/urls.py
文件,没有就新建一个
from django.conf.urls import urlfrom . import views
urlpatterns = [ url(r'^pie/$', views.ChartView.as_view(), name='demo'), url(r'^index/$', views.IndexView.as_view(), name='demo'),]
3. 编写 Django 和 pyecharts 代码渲染图表
由于 json 数据类型的问题,无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。
因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。
将下列代码保存到 demo/views.py
中
from django.shortcuts import render
# Create your views here.
import jsonfrom random import randrange
from django.http import HttpResponsefrom rest_framework.views import APIView
from pyecharts.charts import Bar, Piefrom pyecharts.faker import Fakerfrom pyecharts import options as opts
# 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_responseJsonError = json_error
def pie_base() -> Pie: c = ( Pie() .add("", [list(z) for z in zip(Faker.choose(), Faker.values())]) .set_colors(["blue", "green", "yellow", "red", "pink", "orange", "purple"]) .set_global_opts(title_opts=opts.TitleOpts(title="Pie-示例")) .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}")) .dump_options_with_quotes() ) return c
class ChartView(APIView): def get(self, request, *args, **kwargs): return JsonResponse(json.loads(pie_base()))
class IndexView(APIView): def get(self, request, *args, **kwargs): return HttpResponse(content=open("./templates/index.html").read())
4. 编写画图的 HTML 代码
在根目录下新建一个 templates
的文件夹,并在该文件夹下新建一个 index.html
文件
代码如下:
html><html><head> <meta charset="UTF-8"> <title>Awesome-pyechartstitle> <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="pie" style="width:1000px; height:600px;">div><script>var chart = echarts.init(document.getElementById('pie'), 'white', {renderer: 'canvas'}); $(function () { fetchData(chart); } );function fetchData() { $.ajax({type: "GET",url: "http://127.0.0.1:8000/demo/pie",dataType: 'json',success: function (result) { chart.setOption(result.data); } }); }script>body>html>
运行之后,在浏览器中打开,效果如下:
定时全量更新图表
前面讲的是一个静态数据的展示的方法,用 Pyecharts 和 Django 结合最主要是实现一种动态更新数据,增量更新数据等功能!
定时全量更新主要是前端主动向后端进行数据刷新,定时刷新的核心在于 HTML 的 setInterval 方法。
那么 index.html
代码就是下面这样的:
html><html><head> <meta charset="UTF-8"> <title>Awesome-pyechartstitle> <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'}); $(function () { fetchData(chart); setInterval(fetchData, 100); } );function fetchData() { $.ajax({type: "GET",url: "http://127.0.0.1:8000/demo/bar",dataType: 'json',success: function (result) { chart.setOption(result.data); } }); }script>body>html>
同时在 demo/views.py
中,增加并修改代码:
demo/urls.py
中,增加如下代码:
urlpatterns = [ url(r'^pie/$', views.ChartView.as_view(), name='demo'), url(r'^bar/$', views.ChartView.as_view(), name='demo'), url(r'^index/$', views.IndexView.as_view(), name='demo'),]
运行之后,效果如下:
贴一张以前做的图(因为我懒),效果和上面一样
定时增量更新图表
原理一样,先修改 index.html ,代码如下:
html><html><head> <meta charset="UTF-8"> <title>Awesome-pyechartstitle> <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(fetchData, 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]); chart.setOption({series: [{data: old_data }] }); } }); }script>body>html>
细心的你应该可以发现,里面新增了两个请求地址 demo/line
, demo/lineUpdate
so,在 urlpatterns
中增加以下路径的匹配
url(r'^line/$', views.ChartView.as_view(), name='demo'),url(r'^lineUpdate/$', views.ChartView.as_view(), name='demo'),
最后在 views.py
中增加以下代码:
def line_base() -> Line: line = ( Line() .add_xaxis(["{}".format(i) for i in range(10)]) .add_yaxis( series_name="", y_axis=[randrange(50, 80) for _ in range(10)], is_smooth=True, label_opts=opts.LabelOpts(is_show=False), ) .set_global_opts( title_opts=opts.TitleOpts(title="动态数据"), xaxis_opts=opts.AxisOpts(type_="value"), yaxis_opts=opts.AxisOpts(type_="value"), ) .dump_options_with_quotes() ) return line
class ChartView(APIView): def get(self, request, *args, **kwargs): return JsonResponse(json.loads(line_base())cnt = 9
class ChartUpdateView(APIView): def get(self, request, *args, **kwargs): global cnt cnt = cnt + 1 return JsonResponse({"name": cnt, "value": randrange(0, 100)})
运行并打开,效果如下:
全部代码已上传,后台回复 django 获取
django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法相关推荐
- 利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- 利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...
- 干货!Flask 动态展示 Pyecharts 图表数据的几种方法!
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- 利用Flask动态展示Pyechats图表
之前,在网上搜到过很多教程,但是我按照教程做,一次也没成功.踩了很多坑,最后才做成. 没成功的主要原因: pyecharts版本不同,有些函数我的pyecharts库里没有,如dump_options ...
- 用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
- php imagick 取得psd缩略图,PHP利用imagick读取PDF生成png缩略图的两种方法
PHP利用imagick读取PDF生成png缩略图的两种方法 发表于2019-04-24 06:08| 次阅读| 来源网络整理| 作者session 摘要:PHP利用imagick读取PDF生成png ...
- HTML5动态加载资源方式,动态加载JavaScript文件的两种方法
这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval ...
- 动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
- html select ajax,AJAX 动态加载后台数据 绑定select的方法
直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...
最新文章
- 13KB的代码能做什么?有些人可是弄出了一个完整的游戏!
- Tableau实战系列数据连接及数据准备
- C语言程序设计 练习1-13
- LeetCode 862. 和至少为 K 的最短子数组(前缀和+deque单调栈)
- 工厂方法与抽象工厂模式的区别
- C和C++的互相调用【原创】
- 在 Microsoft word中插入代码
- 一个代码都不用敲的可视化大屏,一口气把工具和模板都送给你
- 简介JavaScript的组成
- matlab Tricks(二十七)—— 可变输入参数输出参数的适配
- 【MTSP】基于matlab遗传算法求解多旅行商问题【含Matlab源码 016期】
- java 夏令时标志_Java里面的夏令时 | 学步园
- 使用U盘在虚拟机中安装系统
- java学习5:公告管理案例
- loadrunner基础分享ppt
- zjyxmdshoes
- vue axios在开发中遇到的问题
- 被限制出县城_5种人不被批准出境 芜湖县今年阻止14人
- pytest测试框架fixture的应用
- su 和 sudo -i、su root区别
热门文章
- Asp.net单点登录解决方案
- win8 C盘空间不足的几种解决方法
- Maven出现User setting file does not exist ...\.m2\setting.xml的问题解决(同时也解决用户.m2目录下无setting.xml文件)
- 解决windows文件在linux系统中显示乱码的问题
- Yii实现Password Repeat Validate Rule
- 我爸和在我们小区里的一位老大爷
- SpringBoot系列: RestTemplate 快速入门
- paramiko连接方式
- Mysql 主从复制(AB复制)
- 超好用的移动端布局自适应大小rem判断js文件及超过一定高度回到顶部按钮代码...