溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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" >
<head>
<meta charset="utf-8">
</head>
<body >
<h2 > 月度銷售情況</h2>>
<div id="container" ></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>
關于“Django與圖表的數據交互如何實現”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Django與圖表的數據交互如何實現”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
