Django与图表的数据交互的实现
目录
- 环境相关
- 实现思路（需要理解的请结合代码来看）
- 代码：
- 成果展示
- 参考博客
在Django开发过程中，遇到了需要图表进行数据可视化的需要。因此查询了相关文档，并记录下如何实现与图表的数据交互。 本人是个前端小白，只会改不会写（套模板）。
仅供参考！！！
环境相关
Django （版本不限，当然不同的版本有不同的后端代码写法。本文环境为Django 3.1）
echarts （前端的画图框架，导入JS包即可） 点击网址可以找到模板 网址
JQuery （用于Ajax请求 导入JS包即可 在文中会有JS包地址）
实现思路（需要理解的请结合代码来看）
- 后端方面主要涉及到了ajax，其实就是前端对后端请求一个特定的地址，后端收到请求后，将数据整理并打包成json格式向前端发送，有点类似于在写API接口。
- 前端方面。主要有两个点：echarts 和Ajax 。
- echarts 中可以看到，生成的模板里面有2个data项，用于储存数据信息制作表格。 （不同的图表有不同的数据点，本文只有2个data项，生成折线图）
- Ajax 用于向后端发送请求。
- 在编写过程中，先将echarts 表的数据项清空（data : []）。 后续通过ajax请求向后端请求数据包，并提取对应的数据加入到echarts 表的数据项中。
代码：
urls.py
re_path('ajax_line/', views.ajax_line, name='ajax_line'),
ajax请求接口：
from django.db import models
from datetime import datetime
# Create your models here.
class Shop(models.Model):
Name = models.CharField(max_length=50, verbose_name='名称')
Barcode = models.CharField(max_length=50, verbose_name='条形码' ,default ='')
Money = models.IntegerField(default=0, verbose_name='单价')
number = models.IntegerField(default=0, verbose_name='库存')
Other = models.CharField(max_length=100, verbose_name='备注' ,default='无')
objects = models.Manager()
def __str__(self):
return self.Name
class Meta:
verbose_name = '商品'
verbose_name_plural = verbose_name
class ShopOrders(models.Model):
Produce = models.ManyToManyField(Shop, verbose_name='产品清单', blank=True)
Money = models.IntegerField(default=0, verbose_name='合计')
add_time = models.DateTimeField(default=datetime.now, verbose_name='时间')
Other = models.CharField(max_length=100, verbose_name='备注' , default='无')
Owner = models.CharField(max_length=50, verbose_name='销售人员',default ='')
FRESHMAN = 'FR'
SOPHOMORE = 'SO'
JUNIOR = 'JR'
YEAR_IN_SCHOOL_CHOICES = (
(FRESHMAN, '微信'),
(SOPHOMORE, '现金'),
(JUNIOR, '支付宝'),
)
Type = models.CharField(
max_length=2,
choices=YEAR_IN_SCHOOL_CHOICES,
default=FRESHMAN,
)
objects = models.Manager()
def __str__(self):
return self.Owner
class Meta:
verbose_name = '商品订单'
verbose_name_plural = verbose_name
models
from django.db import models
from datetime import datetime
# Create your models here.
class Shop(models.Model):
Name = models.CharField(max_length=50, verbose_name='名称')
Barcode = models.CharField(max_length=50, verbose_name='条形码' ,default ='')
Money = models.IntegerField(default=0, verbose_name='单价')
number = models.IntegerField(default=0, verbose_name='库存')
Other = models.CharField(max_length=100, verbose_name='备注' ,default='无')
objects = models.Manager()
def __str__(self):
return self.Name
class Meta:
verbose_name = '商品'
verbose_name_plural = verbose_name
class ShopOrders(models.Model):
Produce = models.ManyToManyField(Shop, verbose_name='产品清单', blank=True)
Money = models.IntegerField(default=0, verbose_name='合计')
add_time = models.DateTimeField(default=datetime.now, verbose_name='时间')
Other = models.CharField(max_length=100, verbose_name='备注' , default='无')
Owner = models.CharField(max_length=50, verbose_name='销售人员',default ='')
FRESHMAN = 'FR'
SOPHOMORE = 'SO'
JUNIOR = 'JR'
YEAR_IN_SCHOOL_CHOICES = (
(FRESHMAN, '微信'),
(SOPHOMORE, '现金'),
(JUNIOR, '支付宝'),
)
Type = models.CharField(
max_length=2,
choices=YEAR_IN_SCHOOL_CHOICES,
default=FRESHMAN,
)
objects = models.Manager()
def __str__(self):
return self.Owner
class Meta:
verbose_name = '商品订单'
verbose_name_plural = verbose_name
前端
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=line-simple
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<h1 style="Text-align:center"> 月度销售情况</h1>>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
xAxis: {
type: 'category',
data: []
},
yAxis: {
type: 'value'
},
series: [
{
data: [],
type: 'line'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
myChart.showLoading();
var names = [];
var brower = [];
$.ajax({ // ajax的方式动态获取后端代码
type: 'get',
url: '/index/ajax_line/',
dataType: 'json',
success: function (result) {
$.each(result.data, function (index, item) {
names.push(item.name);
brower.push({
value: item.count,
name: item.name
});
});
myChart.hideLoading();
myChart.setOption({
xAxis: {
data: names
},
series: [{
data: brower
}]
});
},
error: function (errormsg) {
alert('errormsg');
myChart.hideLoading();
}
});
</script>
</body>
</html>
成果展示
参考博客
echarts动态获取Django数据
到此这篇关于Django与图表的数据交互的实现的文章就介绍到这了,更多相关Django 图表数据交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
在Django中Pyecharts生成图表实现
1 因为pyecharts是支持python的一种可视化,但是想要将其放入网页中,主要有两种方法 (1)在网页中假如iframe,将网页嵌在iframe中(该方法不具体描述) (2)使用json传输到前端,对其进行展示 具体描述第2种方法如下: 假设用pyecharts画一张折线图 def line(): attr = ['教师', '教授', '副教授', '博导', '硕导', '国家级奖项', '省部级奖项', '院士', '荣誉学者', '专利'] v1 = [100, 20, 15,
-
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动态展示Pyecharts图表数据的几种方法
目录 Django 模板渲染 1. 新建一个 Django 项目 2. 新建项目 urls 文件 3. 编写 Django 和 pyecharts 代码渲染图表 定时全量更新图表 定时增量更新图表 本文将介绍如何在 web 框架 Django 中使用可视化工具 Pyecharts, 看完本教程你将掌握几种动态展示可视化数据的方法! Django 模板渲染 1. 新建一个 Django 项目 命令行中输入以下命令 django-admin startproject pyecharts_django
-
Django Highcharts制作图表
在运维工作总很多数据最终的展现方式要用到图表,毕竟用图来展示要比一堆数字更直观些,比如利用率.站点的PV,UV等,大家千万不要觉得看到很多漂亮的图就感觉很难,其实真心不是,因为现在有很多前端的绘图库,你只需要按它要求的格式(json)提供给前端接口,什么曲线图.饼图,还有你从来都不知道的图都可以生成出来,现在用的比较多的是highcharts,echarts等,django-highcharts是django的一个集成库,使用它在django里更方便绘制出我们想要的图表,所以这篇文章就使用它来完
-
Django展示可视化图表的多种方式
1. 前言 大家好,我是安果! 使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示 常见方案包含:Highcharts.Matplotlib.Echarts.Pyecharts,其中后 2 种方案使用频率更高 本篇文章将聊聊 Django 结合 Echarts.Pyecharts 实现图表可视化的具体流程 2. Echarts Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型 以展示简单的柱状图为例,讲讲 Django
-
Django与图表的数据交互的实现
目录 环境相关 实现思路(需要理解的请结合代码来看) 代码: 成果展示 参考博客 在Django开发过程中,遇到了需要图表进行数据可视化的需要.因此查询了相关文档,并记录下如何实现与图表的数据交互. 本人是个前端小白,只会改不会写(套模板).仅供参考!!! 环境相关 Django (版本不限,当然不同的版本有不同的后端代码写法.本文环境为Django 3.1)echarts (前端的画图框架,导入JS包即可) 点击网址可以找到模板 网址JQuery (用于Ajax请求 导入JS包即可 在文中会有
-
django和vue实现数据交互的方法
我使用的是jQuery的ajax与django进行数据交互,遇到的问题是django的csrf 传输数据的方法如下: $(function() { $.ajax({ url: 'account/register', type: 'post', dataType:'json', data: $('#form1').serialize(), success: function (result) { console.log(result); if (result) { alert("result&qu
-
使用django和vue进行数据交互的方法步骤
一.前端请求的封装 1.将请求地址封装起来,以便日后修改,在src/assets/js目录下创建getPath.js文件 export default function getUrl(str) { let url = 'http://localhost:8000/' + str; return url; } 2.在同一个目录下创建axios.js文件 我的前端数据交互使用的模块使用的是axios import axios from 'axios' import getUrl from './ge
-
Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo
-
Django在视图中使用表单并和数据库进行数据交互的实现
目录 写在前面 目结构及代码 项目结构 路由设置 数据库配置 定义模型 定义表单 修改模板 视图函数 记录感受 写在前面 博主近期有时间的话,一直在抽空看Django相关的项目,苦于没有web开发基础,对JavaScript也不熟悉,一直在从入门到放弃的边缘徘徊(其实已经放弃过几次了,如下图,一年前的笔记).总体感受web开发要比其他技术栈难,前后端技术都有涉及.如果没有实体项目支撑的话,很难学下去.但不管怎样,学习都是一件痛苦的事情,坚持下去总会有收获. 本博客记录的是<Django web
-
vue中axios实现数据交互与跨域问题
1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的. 所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. 注意,axios本质上就是javascript的ajax封装,所以会被同源策略限制. 下载地址: https://unpkg.com/axios@0.18.0/dist/axios.js https://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个:axio
-
Django 使用Ajax进行前后台交互的示例讲解
本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下: <!--利用获取的数据进行表单内容的填充--> <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select
-
python+html实现前后端数据交互界面显示的全过程
目录 前言 1.python开发工具 2.项目创建 总结 前言 最近刚刚开始学习如何将python后台与html前端结合起来,现在写一篇blog记录一下,我采用的是前后端不分离形式. 话不多说,先来实现一个简单的计算功能吧,前端输入计算的数据,后端计算结果,返回结果至前端进行显示. 1.python开发工具 我选用的是pycharm专业版,因为社区版本无法创建django程序 2.项目创建 第一步:打开pycharm,创建一个django程序 蓝圈圈起来的为自定义的名字,点击右下角的create
-
Angular.js中$resource高大上的数据交互详解
本文主要给大家介绍的是关于Angular.js中$resource数据交互的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js 默认情况下,末尾斜杠(可以引起后端服务器不期望出现的行为)将从计算后的URL中剥离. 这个可以通过$resourceProvider配置: app.config(
-
AngularJS实现自定义指令与控制器数据交互的方法示例
本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3