Django展示可视化图表的多种方式
作者:AirPython 发布时间:2022-07-31 07:15:53
目录
1. 前言
2. Echarts
3. Pyecharts
3-1 安装依赖
3-2 拷贝 pyecharts 的模板文件到项目下
3-3 编写视图函数,渲染图表
3-4 运行项目
4. 最后
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),
]
发现,首页展示了一个简单的柱状图
更多复杂的图表展示可以参考官方
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/
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 运行项目
运行项目,生成的柱状图如下:
这只是最简单的使用实例,更多复杂的图表及前后端分离、更新的例子
可以参考官网:
https://pyecharts.org/#/zh-cn/web_django?id=django-前后端分离
4. 最后
文中介绍了 Django 快速集成 Echarts 和 Pyecharts 的基本步骤
实际项目中,一些复杂的图表、前后端分离数据更新可以参考官网去拓展
源码:https://github.com/xingag/python_web
来源:https://www.cnblogs.com/xingag/p/14631278.html
猜你喜欢
- 阅读上一章:Chapter 6 短语元素Chapter 7 锚点HTML中的链接,正确的说法应该称作"锚点",它不仅让我
- 问题: jsp中想要输出的中文被显示成“?” 解决方法 : 在eclipse-windows- preferences中 搜索jsp , E
- 什么是错误页面?是指链接指向的网页现在失效了,原因可能是用户输错了地址,也可能是网站结构调整,内容删除,或者地址变更都有可能出现这种情况。那
- 一、dim的定义TensorFlow对张量的阶、维度、形状有着明确的定义,而在pytorh中对其的定义却模糊不清,仅仅有一个torch.si
- 用户习惯大家都经常在提,习惯源于何出?回答可以是软件的用户习惯源于其不断使用过程中的印象积累。如果是这个软件刚诞生的时候呢?于是就得参考同类
- python3的编码问题。打开python开发工具IDLE,新建‘codetest.py'文件,并写代码如下:import sysp
- pytorch transform数据处理转c++python推理代码转c++ sdk过程遇到pytorch数据处理的转换1.python代
- API说明调用地址:http://yzxyzm.market.alicloudapi.com/yzx/verifySms请求方式:POST返
- 英语原文地址:点此浏览新年开始了,来点猛料,放上15个漂亮的网页排版的demo,来欣赏一下。去年我也专门找了15个同类网站,比较受用户欢迎,
- 如何做一个随机密码产生器?<%genPassword = ""RandomizeFor&nbs
- print函数是Python的入门,每一个学习python的人都绕不开这个函数,下面介绍一下这个函数的用法。打开电脑,选择python软件,
- 想查找mac下python的site-packages目录,如果用网上搜的安装目录之类的去找,进去每一层很多都是软链接形式存在,比较浪费时间
- Mysql分页采用limt关键字select * from t_order limit 5,10; #返回第6-15行数据select *
- import wx import imagesclass DemoTaskBarIcon(wx.TaskBarIcon): &nb
- 自动扫雷一般分为两种,一种是读取内存数据,而另一种是通过分析图片获得数据,并通过模拟鼠标操作,这里我用的是第二种方式。一、准备工作1.扫雷游
- 一个网站的导航就相当于是一条路的路标,不同的是,网站的不同栏目页的入口远远比马路要来得复杂,所以一个清晰的导航设计对于一个网站的意义远远大于
- 在SQL Server中进行开发会让你身处险地,并且寻找快速解决方案。我们编辑了前十名关于SQL Server开发的常见问题。对常见的针对表
- 使用re, urllib, threading多线程抓取天涯帖子内容,设置url为需抓取的天涯帖子的第一页,设置file_name为下载后的
- 在Python语言中,Uincode字符串处理一直是一个容易让人迷惑的问题。许多Python爱好者经常因为搞不清Unicode、UTF-8还
- 取行和列的几种常用方式:data[ 列名 ]: 取单列或多列,不能用连续方式取,也不能用于取行。data.列名: 只用于取单列,不能用于行。