在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请求接口:
def ajax_line(request):
# 数据处理
# 要求: 统计前5个月的销售额
DateSum = []
Date = []
# 取前5个月的日期
for i in range(0,5):
month = datetime.date(datetime.date.today().year, datetime.date.today().month - i, 1) # 当月一号
Date.append(month)
# 分别取30天的销售额
ShopList = ShopOrders.objects.filter( add_time__year=month.year, add_time__month=month.month)
sum = 0
for j in ShopList :
sum += j.Money
DateSum.append(sum)
# 数据打包
jsondata = {
"Date": Date,
"DateSum": DateSum
}
cities = []
for n, c in zip(jsondata['Date'], jsondata['DateSum']):
b = {}
b['name'] = n
b['count'] = c
cities.append(b)
test_dic = {}
test_dic['data'] = cities
# 将数据转换成json格式,方便ajax调用
return JsonResponse(test_dic, safe=False)
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
前端
成果展示 参考博客月度销售情况
>
echarts动态获取Django数据



