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-前后端分离

4. 最后

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

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

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

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

(0)

相关推荐

  • Django显示可视化图表的实践

    一 实战 1 Django_lab\urls.py # -*- coding: utf-8 -*- from django.conf.urls import url,include from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), # 定义图表url url(r'^chart/', include('chart.urls')), ] 2 在settings.py中添加图表应用 IN

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

    1. 前言 大家好,我是安果! 使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示 常见方案包含:Highcharts.Matplotlib.Echarts.Pyecharts,其中后 2 种方案使用频率更高 本篇文章将聊聊 Django 结合 Echarts.Pyecharts 实现图表可视化的具体流程 2. Echarts Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型 以展示简单的柱状图为例,讲讲 Django

  • Django动态展示Pyecharts图表数据的几种方法

    目录 Django 模板渲染 1. 新建一个 Django 项目 2. 新建项目 urls 文件 3. 编写 Django 和 pyecharts 代码渲染图表 定时全量更新图表 定时增量更新图表 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令行中输入以下命令 django-admin startproject pyecharts_django

  • vue-cli和v-charts实现可视化图表过程解析

    v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具,在使用 echarts 生成图表时,经常需要做繁琐的数据类型转化.修改复杂的配置项,v-charts 的出现正是为了解决这个痛点.基于 Vue2.0 和 echarts 封装的 v-charts 图表组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,便可轻松生成常见的图表. v-charts的中文社区文档(https://v-charts.js.org/#/),可根据项目需要自主学习和浏览: 因为项目需要

  • 一篇文章让你快速掌握Pandas可视化图表

    目录 前言 1. 概述 2. 图表元素设置 3. 常见图表类型 4. 其他图表类型 总结 前言 今天简单介绍一下Pandas可视化图表的一些操作,Pandas其实提供了一个绘图方法plot(),可以很方便的将Series和Dataframe类型数据直接进行数据可视化. 1. 概述 这里我们引入需要用到的库,并做一些基础设置. import pandas as pd import numpy as np import matplotlib.pyplot as plt # 设置 可视化风格 plt.

  • 使用antv替代Echarts实现数据可视化图表详解

    目录 前言 面积图 常用参数文档 图表 度量 scale 提示 tooltip 坐标系 axis chart.line(options) chart.area(options) geom.position() geom.color() geom.shape() 柱状图 数据标签 label chart.coordinate() chart.interval(options) 地图 地图容器配置项 map 地图等级 viewLevel 小结 前言 技术永无止尽,多看看不同风景 周一,还在愉快的为移

  • 详解Python连接MySQL数据库的多种方式

    上篇文章分享了windows下载mysql5.7压缩包配置安装mysql 后续可以选择 ①在本地创建一个数据库,使用navicat工具导出远程测试服务器的数据库至本地,用于学习操作,且不影响测试服务器的数据 ②连接测试服务器的数据库账号和密码,在测试服务器上操作,内部测试服务器的数据库账号和密码在分配时会给不同账号做权限限制,如不同账号允许登录的方式.开放的数据库范围.账号可读写操作的权限都会不一样,若出现一直使用代码登录不上远程数据库服务器,应检查下账号是否具有权限,可询问负责管理测试服务器数

  • 利用 Flask 动态展示 Pyecharts 图表数据的几种方法

    本文将介绍如何在 web 框架 Flask 中使用可视化工具 pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法,不会的话你来找我呀... Flask 模板渲染 1. 新建一个项目 flask-echarts 在编辑器中选择 New Project,然后选择 Flask,创建完之后,Pycharm 会帮我们把启动脚本和模板文件夹都建好 2. 拷贝 pyecharts 模板 将链接中的以下模板 ├── jupyter_lab.html ├── jupyter_notebook.h

  • Python数据分析:手把手教你用Pandas生成可视化图表的教程

    大家都知道,Matplotlib 是众多 Python 可视化包的鼻祖,也是Python最常用的标准可视化库,其功能非常强大,同时也非常复杂,想要搞明白并非易事.但自从Python进入3.0时代以后,pandas的使用变得更加普及,它的身影经常见于市场分析.爬虫.金融分析以及科学计算中. 作为数据分析工具的集大成者,pandas作者曾说,pandas中的可视化功能比plt更加简便和功能强大.实际上,如果是对图表细节有极高要求,那么建议大家使用matplotlib通过底层图表模块进行编码.当然,我

  • Python干货:分享Python绘制六种可视化图表

    可视化图表,有相当多种,但常见的也就下面几种,其他比较复杂一点,大都也是基于如下几种进行组合,变换出来的.对于初学者来说,很容易被这官网上众多的图表类型给吓着了,由于种类太多,几种图表的绘制方法很有可能会混淆起来. 因此,在这里,我特地总结了六种常见的基本图表类型,你可以通过对比学习,打下坚实的基础. 01. 折线图 绘制折线图,如果你数据不是很多的话,画出来的图将是曲折状态,但一旦你的数据集大起来,比如下面我们的示例,有100个点,所以我们用肉眼看到的将是一条平滑的曲线. 这里我绘制三条线,只

随机推荐