时间:2021-05-23
大家好,我是安果!
使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示
常见方案包含:Highcharts、Matplotlib、Echarts、Pyecharts,其中后 2 种方案使用频率更高
本篇文章将聊聊 Django 结合Echarts、Pyecharts 实现图表可视化的具体流程
Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型
以展示简单的柱状图为例,讲讲 Django 集成 Echarts 的流程
首先,在某个 App 的 views.py 编写视图函数
当请求方法为 POST 时,定义柱状图中的数据值,然后使用JsonResponse 返回数据
from django.http import JsonResponsefrom django.shortcuts import renderdef 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 adminfrom django.urls import path, includeurlpatterns = [ path('',include('index.urls')), path('admin/', admin.site.urls),]发现,首页展示了一个简单的柱状图
更多复杂的图表展示可以参考官方
https://echarts.apache.org/examples/zh/index.html
Pyecharts 是一款使用 Python 对 Echarts 进行再次封装后的开源框架
相比 Echarts,Django 集成 Pyecharts 更快捷、方便
Django 集成 Pyecharts 只需要 4步
将虚拟环境中pyecharts 的模板文件拷贝到项目的模板文件夹下
比如本机路径如下:
/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/
在视图文件中,使用 pyecharts 库内置的类Bar 创建一个柱状图
# Create your views here.from django.http import HttpResponsefrom jinja2 import Environment, FileSystemLoaderfrom pyecharts.globals import CurrentConfigCurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./index/templates"))from pyecharts import options as optsfrom 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())运行项目,生成的柱状图如下:
这只是最简单的使用实例,更多复杂的图表及前后端分离、更新的例子
可以参考官网:
https://pyecharts.org/#/zh-cn/web_django?id=django-前后端分离
文中介绍了 Django 快速集成 Echarts 和 Pyecharts 的基本步骤
实际项目中,一些复杂的图表、前后端分离数据更新可以参考官网去拓展
源码:https://github.com/xingag/python_web
以上就是Django展示可视化图表的多种方式的详细内容,更多关于Django 可视化图表的资料请关注其它相关文章!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言inMap是一款基于canvas的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变
前言深入学习chart.js的选项来制作漂亮的图表。交互式图表可以给你的数据可视化提供很酷的展示方式。但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的
pyecharts是一个用于生成Echarts图表的类库。Echarts是百度开源的一个数据可视化JS库。用Echarts生成的图可视化效果非常棒,pyecha
数据的显示及分析。基于Web的数据可视化系统充分利用可视化技术、回归分析、数据挖掘技术等分析并处理数据信息,同时显示图表的JavaApplet。同时,在Web中
pyecharts介绍pyecharts是一个用于生成Echarts图表的类库。Echarts是百度开源的一个数据可视化JS库。用Echarts生成的图可视化效