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爬虫之爬虫框架Scrapy安装配置
Nov 06 Python
Python简单实现安全开关文件的两种方式
Sep 19 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
Jun 18 Python
django框架model orM使用字典作为参数,保存数据的方法分析
Jun 24 Python
python配置文件写入过程详解
Oct 19 Python
Python实现图片添加文字
Nov 26 Python
python 实现目录复制的三种小结
Dec 04 Python
利用python实现.dcm格式图像转为.jpg格式
Jan 13 Python
TensorFlow自定义损失函数来预测商品销售量
Feb 05 Python
keras load model时出现Missing Layer错误的解决方式
Jun 11 Python
python如何调用php文件中的函数详解
Dec 29 Python
python实现简单的聊天小程序
Jul 07 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
php开发工具之vs2005图解
2008/01/12 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
2015/08/31 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
详解a++和++a的区别
2017/08/30 Javascript
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
jQuery+SpringMVC中的复选框选择与传值实例
2018/01/08 jQuery
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
jQuery实现日历效果
2020/09/11 jQuery
python通过微信发送邮件实现电脑关机
2018/06/20 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python实现图片转字符画
2021/02/19 Python
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
lululemon美国官网:瑜伽服+跑步装备
2018/11/16 全球购物
总经理司机岗位职责
2014/02/06 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
动物科学专业求职信
2014/07/27 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
求职信范文怎么写
2015/03/19 职场文书
2016特色励志班级口号
2015/12/24 职场文书
python opencv旋转图片的使用方法
2021/06/04 Python
Go Plugins插件的实现方式
2021/08/07 Golang
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
nginx搭建NFS网络文件系统
2022/04/14 Servers