Django展示可视化图表的多种方式


Posted in Python onApril 08, 2021

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),
]

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

Django展示可视化图表的多种方式

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

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/

Django展示可视化图表的多种方式

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  运行项目

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

Django展示可视化图表的多种方式

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

可以参考官网:

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

4. 最后

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

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

源码:https://github.com/xingag/python_web

以上就是Django展示可视化图表的多种方式的详细内容,更多关于Django 可视化图表的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
Python学习笔记之os模块使用总结
Nov 03 Python
利用python实现xml与数据库读取转换的方法
Jun 17 Python
Python跨文件全局变量的实现方法示例
Dec 10 Python
pandas 实现字典转换成DataFrame的方法
Jul 04 Python
python按照多个条件排序的方法
Feb 08 Python
Python 控制终端输出文字的实例
Jul 12 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
Aug 02 Python
Python 获取指定文件夹下的目录和文件的实现
Aug 30 Python
Python queue队列原理与应用案例分析
Sep 27 Python
Django之使用celery和NGINX生成静态页面实现性能优化
Oct 08 Python
Python GUI自动化实现绕过验证码登录
Jan 10 Python
Python常用数据分析模块原理解析
Jul 20 Python
python tkinter模块的简单使用
python如何在word中存储本地图片
python 下载文件的几种方式分享
Apr 07 #Python
完美处理python与anaconda环境变量的冲突问题
python 如何用map()函数创建多线程任务
python requests模块的使用示例
Apr 07 #Python
Python 使用dict实现switch的操作
Apr 07 #Python
You might like
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
php实现文件上传基本验证
2020/03/04 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
2017/12/28 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
Vuex 使用 v-model 配合 state的方法
2018/11/13 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
分析python请求数据
2018/08/19 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
Windows和Linux动态库应用异同
2016/07/28 面试题
银行职业规划书范文
2013/12/28 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL