Django 旨在使常见的Python Web 开发任务变得快速和简单。关于如何使用 Django 编写数据库驱动的 Web 应用程序的是当下较为流行的开发方式。而在web开发过程中,有许多需要展示图表的时候,这时,django可视化就变得尤为重要。接下来就给大家分享一下django框架怎么可视化?
首先django框架本身不能进行可视化,需要结合其他的内容。比如结合Highcharts、Matplotlib、Echarts、Pyecharts等,本文就给大家分享一下如何结合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框架怎么可视化?”的详细内容,想要了解更多django框架内容欢迎持续关注编程学习网
扫码二维码 获取免费视频学习资料
- 本文固定链接: http://phpxs.com/post/9959/
- 转载请注明:转载必须在正文中标注并保留原文链接
- 扫码: 扫上方二维码获取免费视频资料
查 看2022高级编程视频教程免费获取