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

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

来源:AirPython

作者:星安果

a10e8ff5aee9821b9b3838b38a029702.png

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依赖#}

然后,重写 window. 函数,发送一个 Ajax 请求给后端,利用 Echarts 将返回结果展示到图表中去

// 柱状图

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. = function () {

//发送post请求,地址为index(Jquery)

$.ajax({

url: "/",

type: "POST",

data: {},

success: function (data) {

// 柱状图

show_bar(data['bar_datas']);

//后端返回的结果

console.log(data)

}

})

}

最后,编写路由 URL,运行项目

from django.contrib import admin

from django.urls import path, include

urlpatterns = [

path('',include('index.urls')),

path('admin/', admin.site.urls),

]

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

eb2d211d156c399bf339739dc19bdea5.png

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/

f171e6bfa5e6715487697fcada1a2d02.png

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

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

904fb9f2146e0d80237ec716fb355102.png

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

4. 最后

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

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

责任编辑:

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django中使用Echarts进行数据可视化的步骤如下: 1. 安装Echarts 可以通过Echarts官方网站下载或者使用CDN引入Echarts库。 2. 将数据从数据库中提取出来 在视图函数中编写查询数据库的逻辑,将查询结果传递给模板。 3. 在模板中引入Echarts库和绘图容器 在模板中引入Echarts库和一个HTML元素作为绘图容器,例如: ```html {% extends "base.html" %} {% block content %} <div id="main" style="width: 800px;height:600px;"></div> {% endblock %} {% block scripts %} <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> {% endblock %} ``` 4. 编写绘图代码 在模板中编写JavaScript代码,使用Echarts API绘制图表。 ```javascript {% block scripts %} <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script> <script> var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '数据可视化' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: {{ labels | safe }} }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: {{ values | safe }} }] }; myChart.setOption(option); </script> {% endblock %} ``` 其中,`labels`和`values`是从视图函数传递到模板的数据,分别表示X轴标签和Y轴数据。 5. 运行程序 运行Django服务器,访问对应的页面即可看到Echarts绘制的图表。 以上是简单的步骤,具体实现可以根据自己的需要进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值