盘点 Django 展示可视化图表的多种方式(建议收藏)

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-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb

4. 最后

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

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

(0)

相关推荐

  • Py之pyecharts:基于大数据对人工智能进行各种可视化图表分析

    pyecharts:基于大数据对人工智能进行各种可视化图表分析 相关文章 Py之pyecharts:python包之数据可视化包pyecharts简介.安装.使用方法之详细攻略 Pyecharts:p ...

  • Python Flask 数据可视化

    数据可视化是数据处理中的重要部分,前面我们了解了 Flask 的开发和部署,如何用 Flask 做数据可视化呢?今天我们来了解一下. Python 语言极富表达力,并且拥有众多的数据分析库和框架,是数 ...

  • pyecharts生成各种图表

    pyecharts的使用 pyecharts 是一个用于生成 Echarts 图表的类库. echarts 是百度开源的一个数据可视化 JS 库,主要用于数据可视化.pyecharts 是一个用于生成 ...

  • bar库 pyecharts

    Pyecharts V1全新版本使用教程--Bar(柱状图的使用) 以下内容均来自Pyecharts官方使用文档(可自行阅读)和自己的理解: 官方链接:https://pyecharts.org/#/ ...

  • Flask

    Flask 本指南介绍了如何在 Flask 中使用 pyecharts. Flask 模板渲染 Step 0: 新建一个 Flask 项目 $ mkdir pyecharts-flask-demo$ ...

  • Py之pyecharts:python包之数据可视化包pyecharts简介、安装、使用方法之详细攻略

    Py之pyecharts:python包之数据可视化包pyecharts简介.安装.使用方法之详细攻略 相关文章 百度官网echarts案例 Py之pyecharts:python包之数据可视化包py ...

  • Python 图表利器 pyecharts

    来源:Python 技术「ID: pythonall」 随着互联网的高速发展,数据量也在疯狂增长,近几年数据分析,数据挖掘的岗位越来越吃香.说到数据分析,就离不开数据的可视化,毕竟图表比冷冰冰的数字直 ...

  • 菜鸟记444-再来一个在线生成图表的网站,建议收藏以备不时之需

    万一您身边的朋友用得着呢? 各位朋友早上好,小菜继续和您分享经验之谈,截止今日小菜已分享400+篇经验之谈,可以文章编号或关键词进行搜索 以下才是今天的正式内容-- 摘要:本文介绍一个可在线生成图表的 ...

  • 盘点37种团队建设活动方案(建议收藏)

    团队建设 往往"团队建设活动"这句话会让你的团队成员翻白眼.大多数团队建设活动都会引起尴尬,而不是热情.他们可能因为你的团队成员完全不愿意参与而被抵触而产生的负面影响. 但是,有些 ...

  • 盘点|25个设计师必备素材网站,建议收藏!

    缺乏灵感?缺少素材?找不到图片? 有一套好的素材库能让设计师灵感爆发.事半功倍.收藏下面这些设计素材资源网站,再也不用浪费时间寻找素材了! 图案素材资源网站 # 01 人物素材网站 skalgubba ...

  • 中药别名大全!(常见300多种)建议收藏

    陆英 (苛草.七叶金.接骨草.走马风.七叶根.七叶麻.八棱麻) 泽兰 (地瓜儿苗.地笋.地石蚕.蛇王草) 淡竹叶 (竹麦冬.长竹叶.山鸡米) 白花蛇舌草 (蛇舌草.竹叶菜.蛇利草) 青蒿 (香蒿.苦蒿 ...

  • 建筑幕墙竟然有这么多种!建议收藏!

    建筑幕墙的定义 由面板与支承结构体系(支承装置与支承系统)组成的.可相对主体结构有一定位移能力或自身有一定变形能力.不承担主体结构所受作用的建筑外围护墙. 简言之,幕墙就是建筑的漂亮外衣,是现代大型和 ...

  • 世界上最健康的生活方式 (建议收藏)

    生活 ① 少食肉:② 晒太阳:③ 雨中行:④ 常唱歌:⑤ 饭后息:⑥ 挺起胸:⑦ 静坐思:⑧ 天伦乐:⑨ 步当车:⑩ 行善事. 保持自我五术 工作勤奋,娱乐有度:对待朋友,不玩心术:处理事务,不躁不怒 ...

  • 2021装修吉日盘点!今年要装修的必看~~建议收藏

    黄历是中国的传统日历,我们讲究"天时.地利.人和",每当家里要做一件大事时,总会要挑选一个良辰吉日. 今年,无论是你的第一个新家还是第几个新家,如果要装修,一定要挑选一个良辰吉日哦 ...

  • 孩子怎样通过写作,获得心灵的调整和成长,6种写作方式建议收藏

    十年前的一次车祸,让12岁的汤乐儿失去了爸爸,从此跟妈妈.弟弟相依过活.十年过去,长大了的汤乐儿发觉妈妈依然非常挂念爸爸,并一直活在伤痛中,于是她决定跟妈妈和弟弟一起创作小说. 为了让妈妈寄情小说,借 ...

  • 数据营销71:盘点网站数据内容引流的最高境界建议收藏

    第71节一一数据内容营销引流方法. 相信业界的朋友都清楚,百度自家产品在搜索排名中都是比较靠前的,无论是百科.经验.知道.贴吧都 是如此,那么针对外部的企业产品来说,如何让自身的产品能够在百度首页展现 ...