Django与图表的数据交互的实现 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 modelsfrom 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.Nameclass Meta:verbose_name = '商品'verbose_name_plural = verbose_nameclass 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.Ownerclass Meta:verbose_name = '商品订单'verbose_name_plural = verbose_name

models

from django.db import modelsfrom 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.Nameclass Meta:verbose_name = '商品'verbose_name_plural = verbose_nameclass 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.Ownerclass Meta:verbose_name = '商品订单'verbose_name_plural = verbose_name

【Django与图表的数据交互的实现】前端