本文主要介紹了Django與圖表的數(shù)據(jù)交互的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在Django開發(fā)過程中，遇到了需要圖表進(jìn)行數(shù)據(jù)可視化的需要。因此查詢了相關(guān)文檔，并記錄下如何實(shí)現(xiàn)與圖表的數(shù)據(jù)交互。本人是個(gè)前端小白，只會(huì)改不會(huì)寫（套模板）。
僅供參考?。?！

環(huán)境相關(guān)

Django （版本不限，當(dāng)然不同的版本有不同的后端代碼寫法。本文環(huán)境為Django 3.1）
echarts （前端的畫圖框架，導(dǎo)入JS包即可）點(diǎn)擊網(wǎng)址可以找到模板網(wǎng)址
JQuery （用于Ajax請(qǐng)求導(dǎo)入JS包即可在文中會(huì)有JS包地址）

實(shí)現(xiàn)思路（需要理解的請(qǐng)結(jié)合代碼來看）

后端方面主要涉及到了ajax，其實(shí)就是前端對(duì)后端請(qǐng)求一個(gè)特定的地址，后端收到請(qǐng)求后，將數(shù)據(jù)整理并打包成json格式向前端發(fā)送，有點(diǎn)類似于在寫API接口。
前端方面。主要有兩個(gè)點(diǎn)：echarts 和Ajax 。
echarts 中可以看到，生成的模板里面有2個(gè)data項(xiàng)，用于儲(chǔ)存數(shù)據(jù)信息制作表格。（不同的圖表有不同的數(shù)據(jù)點(diǎn)，本文只有2個(gè)data項(xiàng)，生成折線圖）
Ajax 用于向后端發(fā)送請(qǐng)求。
在編寫過程中，先將echarts 表的數(shù)據(jù)項(xiàng)清空（data : []）。后續(xù)通過ajax請(qǐng)求向后端請(qǐng)求數(shù)據(jù)包，并提取對(duì)應(yīng)的數(shù)據(jù)加入到echarts 表的數(shù)據(jù)項(xiàng)中。

代碼：

urls.py

re_path('ajax_line/', views.ajax_line, name='ajax_line'),

ajax請(qǐng)求接口：

  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='單價(jià)')
    number = models.IntegerField(default=0, verbose_name='庫(kù)存')
    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='產(chǎn)品清單', blank=True)
    Money = models.IntegerField(default=0, verbose_name='合計(jì)')
    add_time = models.DateTimeField(default=datetime.now, verbose_name='時(shí)間')
    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, '現(xiàn)金'),
        (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='單價(jià)')
    number = models.IntegerField(default=0, verbose_name='庫(kù)存')
    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='產(chǎn)品清單', blank=True)
    Money = models.IntegerField(default=0, verbose_name='合計(jì)')
    add_time = models.DateTimeField(default=datetime.now, verbose_name='時(shí)間')
    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, '現(xiàn)金'),
        (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的方式動(dòng)態(tài)獲取后端代碼
        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動(dòng)態(tài)獲取Django數(shù)據(jù)

到此這篇關(guān)于Django與圖表的數(shù)據(jù)交互的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Django 圖表數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: