利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法!
Django 模板渲染
1. 新建一个 Django 项目
命令行中输入以下命令
django-admin startproject pyecharts_django_demo
创建一个应用程序
python manage.py startapp demo
很多人学习python,不知道从何学起。
很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。
很多已经做案例的人,却不知道如何去学习更加高深的知识。
那么针对这三类人,我给大家提供一个好的学习平台,免费领取视频教程,电子书籍,以及课程的源代码!
QQ群:1156465813
创建完之后,在 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 url
from . import viewsurlpatterns = [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 json
from random import randrangefrom django.http import HttpResponse
from rest_framework.views import APIViewfrom pyecharts.charts import Bar, Pie
from pyecharts.faker import Faker
from 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 responsedef 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_errordef 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 cclass 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
文件
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="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
代码就是下面这样的:
<!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'});$(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
中,增加并修改代码:
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 ,代码如下:
<!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(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 lineclass ChartView(APIView):def get(self, request, *args, **kwargs):return JsonResponse(json.loads(line_base())
cnt = 9class ChartUpdateView(APIView):def get(self, request, *args, **kwargs):global cntcnt = cnt + 1return JsonResponse({"name": cnt, "value": randrange(0, 100)})
运行并打开,效果如下:
需要完整源码的可以加入我的Python学习圈子领取。
在这里还是要推荐下我自己建的Python开发学习群:1156465813,群里都是学Python开发的,如果你正在学习Python ,欢迎你加入,大家都是软件开发党,不定期分享干货(只有Python软件开发相关的),包括我自己整理的一份2020最新的Python进阶资料和高级开发教程,欢迎进阶中和进想深入Python的小伙伴!
利用 Django 动态展示 Pyecharts 图表数据的几种方法相关推荐
- django jsonresponse_利用 Django 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令 ...
- 利用 Flask 动态展示 Pyecharts 图表数据的几种方法
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- 干货!Flask 动态展示 Pyecharts 图表数据的几种方法!
本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀- Flask 模板渲染 1. 新建一个项目fla ...
- 利用Flask动态展示Pyechats图表
之前,在网上搜到过很多教程,但是我按照教程做,一次也没成功.踩了很多坑,最后才做成. 没成功的主要原因: pyecharts版本不同,有些函数我的pyecharts库里没有,如dump_options ...
- 用旭日图展示数据的三种方法
什么是旭日图? 旭日图(Sunburst Chart)是一种现代饼图,它超越传统的饼图和环图,能表达清晰的层级和归属关系,以父子层次结构来显示数据构成情况.旭日图中,离远点越近表示级别越高,相邻两层中 ...
- html select ajax,AJAX 动态加载后台数据 绑定select的方法
直接上代码 是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...
- 前端js调用后端API获取数据的三种方法(2022.7.25)
前端js调用后台API获取数据的三种方法(2022.7.25) 前言 需求分析 一个Get实例 浏览器请求 SoapUI软件请求 一个Post实例 浏览器请求 SoapUI软件请求 1.Http简介( ...
- python csv库,Python 中导入csv数据的三种方法
Python 中导入csv数据的三种方法,具体内容如下所示: 1.通过标准的Python库导入CSV文件: Python提供了一个标准的类库CSV文件.这个类库中的reader()函数用来导入CSV文 ...
- 动态加载JS脚本的4种方法
动态加载JS脚本的4种方法 2006-12-04 15:33 要实现动态加载JS脚本有4种方法: 1.直接document.write <script language="javasc ...
最新文章
- 深度干货!值得精读的2018自动驾驶行业发展报告
- Bitcoin 地址原理(2)私钥、公钥、地址基本概念
- 关于Java的23种设计模式的有趣见解
- 前端的date类型后台接收_腾讯高级前端工程师支招,云开发实现小程序打赏和提现云开发实践...
- 基于android模拟led发光,LED通知灯模拟app
- 怎样编写测试类测试分支_编写干净的测试–从配置开始
- wps单机无网络版_单平台销量破百万,这个国产单机系列要出网游,还要上主机...
- CentOS下MySQL主从同步配置
- ACM程序设计选修课——1036: Hungar的菜鸟赛季(YY)
- angular4 浏览器兼容
- 人工智能学习该读哪些书籍?
- 主从reactor模式
- ThreadLocal的作用
- 红外传感器型号和参数_深度解析红外传感器原理、分类、性能参数、应用及前景...
- 大数据+人工智能时代,电子招投标更符合未来趋势
- Android H5交互实现拍照显示
- 全基因组水平分泌蛋白鉴定
- Python 数据分析练习1:美国人口数据分析
- 714.买卖股票含手续费
- Python3爬取企查查网站的企业年表并存入MySQL
热门文章
- everything changes so quietly
- 【codeforces 791A】Bear and Big Brother
- 【UI 设计】PhotoShop基础工具 -- 移动工具
- 【HTML】表格标签,map,iframe,h5标签,语义化,标签分类,role,aria-*
- Symantex Endpoint Protection赛门铁克杀毒软件安装
- 方舟进化私服找不到服务器,方舟生存进化私服怎么设置 私人服务器设置方法分享...
- 在深度学习模型的优化上,梯度下降并非唯一的选择
- 樱花庄的宠物女孩AtCoder Grand Contest 015E - Mr.Aoki Incubator
- 炉石传说iPad版抢鲜玩 最全国服登录教程
- 在虚拟机机上安装ubuntu18.04