Django與圖表的數(shù)據(jù)交互的實(shí)現(xiàn)
更新時(shí)間：2022年08月07日 09:40:08 作者：菜雞一枚____
本文主要介紹了Django與圖表的數(shù)據(jù)交互的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
在Django開發(fā)過程中，遇到了需要圖表進(jìn)行數(shù)據(jù)可視化的需要。因此查詢了相關(guān)文檔，并記錄下如何實(shí)現(xiàn)與圖表的數(shù)據(jù)交互。 本人是個(gè)前端小白，只會改不會寫（套模板）。
僅供參考?。。?/strong>
環(huán)境相關(guān)
Django （版本不限，當(dāng)然不同的版本有不同的后端代碼寫法。本文環(huán)境為Django 3.1）
echarts （前端的畫圖框架，導(dǎo)入JS包即可） 點(diǎn)擊網(wǎng)址可以找到模板 網(wǎng)址
JQuery （用于Ajax請求 導(dǎo)入JS包即可 在文中會有JS包地址）
實(shí)現(xiàn)思路（需要理解的請結(jié)合代碼來看）
- 后端方面主要涉及到了ajax，其實(shí)就是前端對后端請求一個(gè)特定的地址，后端收到請求后，將數(shù)據(jù)整理并打包成json格式向前端發(fā)送，有點(diǎn)類似于在寫API接口。
- 前端方面。主要有兩個(gè)點(diǎn)：echarts 和Ajax 。
- echarts 中可以看到，生成的模板里面有2個(gè)data項(xiàng)，用于儲存數(shù)據(jù)信息制作表格。 （不同的圖表有不同的數(shù)據(jù)點(diǎn)，本文只有2個(gè)data項(xiàng)，生成折線圖）
- Ajax 用于向后端發(fā)送請求。
- 在編寫過程中，先將echarts 表的數(shù)據(jù)項(xiàng)清空（data : []）。 后續(xù)通過ajax請求向后端請求數(shù)據(jù)包，并提取對應(yīng)的數(shù)據(jù)加入到echarts 表的數(shù)據(jù)項(xiàng)中。
代碼：
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='單價(jià)')
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='產(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='庫存')
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的方式動態(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動態(tài)獲取Django數(shù)據(jù)
到此這篇關(guān)于Django與圖表的數(shù)據(jù)交互的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Django 圖表數(shù)據(jù)交互內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了python?使用OpenCV進(jìn)行曝光融合，使用OpenCV的Exposure?Fusion，曝光融合是一種將使用不同曝光設(shè)置拍攝的圖像合成為一張看起來像色調(diào)映射的高動態(tài)范圍（HDR）圖像的圖像的方，下文更多詳細(xì)內(nèi)容介紹，需要的小伙伴可以參考一下2022-04-04
這篇文章主要為大家詳細(xì)介紹了python實(shí)現(xiàn)遺傳算法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
python實(shí)現(xiàn)將json多行數(shù)據(jù)傳入到mysql中使用
這篇文章主要介紹了python實(shí)現(xiàn)將json多行數(shù)據(jù)傳入到mysql中使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了Keras loss函數(shù)剖析，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Go語言基于Socket編寫服務(wù)器端與客戶端通信的實(shí)例
這篇文章主要介紹了Go語言基于Socket編寫服務(wù)器端與客戶端通信的實(shí)例,包括實(shí)現(xiàn)基于自定義通訊協(xié)議的Socket通信,需要的朋友可以參考下2016-02-02
pycharm最新免費(fèi)激活碼至2099年(21.3.18親測可用)
這篇文章主要介紹了pycharm最新的激活碼及激活碼的使用方法，幫助大家更好的利用pycharm學(xué)習(xí)python，感興趣的朋友可以了解下。2021-03-03
這篇文章主要介紹了python代碼中怎么換行的相關(guān)知識點(diǎn)以及方法，需要的朋友們可以學(xué)習(xí)下。2020-06-06
linux環(huán)境中沒有網(wǎng)絡(luò)怎么下載python
在本篇文章里小編給大家分享了關(guān)于linux環(huán)境中沒有網(wǎng)絡(luò)怎么下載python的相關(guān)知識點(diǎn)內(nèi)容，需要的朋友們參考下。2019-07-07
Python實(shí)現(xiàn)批量替換Excel中字符
這篇文章主要為大家詳細(xì)介紹了如何使用Python實(shí)現(xiàn)批量替換Excel中字符,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
Python中JSON轉(zhuǎn)換的全面指南與最佳實(shí)踐
JSON是現(xiàn)代應(yīng)用程序中最流行的數(shù)據(jù)交換格式之一,Python通過內(nèi)置的json模塊提供了強(qiáng)大的JSON處理能力,本文將深入探討Python中的JSON轉(zhuǎn)換,包括基本用法、高級特性以及最佳實(shí)踐,需要的朋友可以參考下2025-03-03