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网络编程之文件下载实例分析
May 20 Python
Python可变参数*args和**kwargs用法实例小结
Apr 27 Python
python方法生成txt标签文件的实例代码
May 10 Python
Python数据预处理之数据规范化(归一化)示例
Jan 08 Python
超简单使用Python换脸实例
Mar 27 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
Apr 01 Python
PyQt5创建一个新窗口的实例
Jun 20 Python
python读取yaml文件后修改写入本地实例
Apr 27 Python
Python OpenCV读取中文路径图像的方法
Jul 02 Python
Python基于pillow库实现生成图片水印
Sep 14 Python
如何在scrapy中集成selenium爬取网页的方法
Nov 18 Python
python+selenium小米商城红米K40手机自动抢购的示例代码
Mar 24 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
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
学习PHP Cookie处理函数
2016/08/09 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
php可变长参数处理函数详解
2017/02/22 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
JSON相关知识汇总
2015/07/03 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
2019/06/11 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[32:17]完美世界DOTA2联赛循环赛LBZS vs Forest第二场 10月30日
2020/10/31 DOTA
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python模拟实现分发扑克牌
2020/04/22 Python
html5+css3气泡组件的实现
2014/11/21 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
.net工程师笔试题
2012/06/09 面试题
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
党员对照检查材料思想汇报
2014/09/16 职场文书
2015中秋祝酒词
2015/08/12 职场文书
《我要的是葫芦》教学反思
2016/02/18 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
golang 实用库gotable的具体使用
2021/07/01 Golang
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏