盘点 Django 展示可视化图表的多种方式(建议收藏)

AirPython 2021-04-08 11:46:03
django 可视化 展示 可视 盘点


image

1. 前言

大家好,我是安果!

使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示

常见方案包含:Highcharts、Matplotlib、Echarts、Pyecharts,其中后 2 种方案使用频率更高

本篇文章将聊聊 Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程

2. Echarts

Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型

以展示简单的柱状图为例,讲讲 Django 集成 Echarts 的流程

首先,在某个 App 的 views.py 编写视图函数

当请求方法为 POST 时,定义柱状图中的数据值,然后使用 JsonResponse 返回数据

from django.http import JsonResponse
from django.shortcuts import render
def index_view(request):
if request.method == "POST":
# 柱状图的数据
datas = [5, 20, 36, 10, 10, 20]
# 返回数据
return JsonResponse({'bar_datas': datas})
else:
return render(request, 'index.html', )

在模板文件中,导入 Echarts 的依赖

PS:可以使用本地 JS 文件或 CDN 加速服务

{#导入js和echarts依赖#}
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>

然后,重写 window.onload 函数,发送一个 Ajax 请求给后端,利用 Echarts 将返回结果展示到图表中去

​<script>
// 柱状图
function show_bar(data) {
//控件
var bar_widget = echarts.init(document.getElementById('bar_div'));
//设置option
option = {
title: {
text: '简单的柱状图'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
type: 'category',
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'bar'
}]
};
bar_widget.setOption(option)
}
//显示即加载调用
window.onload = function () {
//发送post请求,地址为index(Jquery)
$.ajax({
url: "/",
type: "POST",
data: {},
success: function (data) {
// 柱状图
show_bar(data['bar_datas']);
//后端返回的结果
console.log(data)
}
})
}
</script>

最后,编写路由 URL,运行项目

from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('',include('index.urls')),
​ path('admin/', admin.site.urls),
]

发现,首页展示了一个简单的柱状图

image

更多复杂的图表展示可以参考官方

https://echarts.apache.org/examples/zh/index.html

3. Pyecharts

Pyecharts 是一款使用 Python 对 Echarts 进行再次封装后的开源框架

相比 Echarts,Django 集成 Pyecharts 更快捷、方便

Django 集成 Pyecharts 只需要 4 步

3-1  安装依赖

# 安装依赖
pip(3) install pyecharts

3-2  拷贝 pyecharts 的模板文件到项目下

将虚拟环境中 pyecharts 的模板文件拷贝到项目的模板文件夹下

比如本机路径如下:

/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/

image

3-3  编写视图函数,渲染图表

在视图文件中,使用 pyecharts 库内置的类 Bar 创建一个柱状图

# Create your views here.
from django.http import HttpResponse
from jinja2 import Environment, FileSystemLoader
from pyecharts.globals import CurrentConfig
CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))
from pyecharts import options as opts
from pyecharts.charts import Bar
# http://127.0.0.1:8000/demo/
def index(request):
c = (
Bar()
.add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"])
.add_yaxis("商家A", [5, 20, 36, 10, 75, 90])
.add_yaxis("商家B", [15, 25, 16, 55, 48, 8])
.set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题"))
)
return HttpResponse(c.render_embed())

3-4  运行项目

运行项目,生成的柱状图如下:

image

这只是最简单的使用实例,更多复杂的图表及前后端分离、更新的例子

可以参考官网:

https://pyecharts.org/#/zh-cn/web_django?id=django-前后端分离

4. 最后

文中介绍了 Django 快速集成 Echarts 和 Pyecharts 的基本步骤

实际项目中,一些复杂的图表、前后端分离数据更新可以参考官网去拓展

我已经将文中完整代码上传到后台,关注公众号「 AirPython 」后,回复关键字「 210406 」获取

如果你觉得文章还不错,请大家 点赞、分享、留言 下,因为这将是我持续输出更多优质文章的最强动力!

版权声明
本文为[AirPython]所创,转载请带上原文链接,感谢
https://www.cnblogs.com/xingag/p/14631278.html

  1. Drawing Doraemon in Python
  2. Python charts
  3. 用 Python 来了解一下《安家》
  4. 用 Python 抓取公号文章保存成 PDF
  5. 用 Python 生成炫酷二维码及解析
  6. Using Python to grab articles with public number and save them as HTML
  7. Getting stock market trading data with Python
  8. Learn about settle down in Python
  9. Using Python to grab articles with public number and save them as PDF
  10. Using Python to generate cool two dimensional code and analysis
  11. 20210225-1 Python错误与异常
  12. 20210225-1 Python errors and exceptions
  13. 使用Python拆分、合并PDF
  14. Using Python to split and merge pdf
  15. 真工程师:20块钱做了张「名片」,可以跑Linux和Python
  16. Implementation of LSB steganography based on MATLAB and python
  17. Real Engineer: 20 yuan to make a "business card", can run Linux and python
  18. python修改微信和支付宝步数
  19. Python changes WeChat and Alipay steps
  20. Python空间分析| 01 利用Python计算全局莫兰指数(Global Moran's I)
  21. Python spatial analysis | 01 using Python to calculate global Moran's index
  22. python入门教程13-05 (python语法入门之数据备份、pymysql模块)
  23. Introduction to Python 13-05 (data backup and pymysql module of introduction to Python syntax)
  24. pandas如何操作Excel?还不会的,看此一篇足矣
  25. How does panda operate excel? Not yet. This is enough
  26. 用python连接数据库模拟用户登录
  27. Using Python to connect database to simulate user login
  28. python入门教程13-04 (语法入门之记录相关操作)
  29. Introduction to Python 13-04
  30. python入门教程13-03 (python语法入门之表相关操作)
  31. Introduction to Python 13-03
  32. python的多线程的网络爬虫,待改进
  33. Python multithreaded web crawler, to be improved
  34. 常见加密算法的Python实现:
  35. Python implementation of common encryption algorithms:
  36. python刷题-核桃的数量
  37. Number of walnuts
  38. Python爬虫知乎文章,采集新闻60秒
  39. Python crawler knows articles and collects news for 60 seconds
  40. Python爬虫知乎文章,采集新闻60秒
  41. Python crawler knows articles and collects news for 60 seconds
  42. bbox_overlaps python
  43. bbox_ overlaps python
  44. 7-43 jmu-python-字符串异常处理 (20 分)
  45. 7-43 JMU Python string exception handling (20 points)
  46. n行Python代码系列:两行代码实现视频文件转成系列图片输出
  47. N-line Python code series: two lines of code to achieve video files into a series of pictures output
  48. python-阶乘计算
  49. Python factorial calculation
  50. Python实现定时发送微信消息
  51. python爬取英雄联盟所有英雄皮肤海报
  52. Sending wechat messages regularly with Python
  53. Python crawls all hero skin posters of hero League
  54. 上手Pandas,带你玩转数据(4)-- 数据清洗
  55. Hands on pandas, take you to play with data (4) -- data cleaning
  56. Python继续霸榜,上古语言Cobol重获关注,IEEE 2020编程语言榜单揭晓
  57. 教你用 Python 下载手机小视频
  58. Python continues to dominate the list, ancient language COBOL regains attention, IEEE 2020 programming language list announced
  59. How to download small video of mobile phone with Python
  60. 如何用 Python 在京东上抢口罩