今天給大家簡(jiǎn)單分享一下一個(gè)基于python的django的框架寫的一個(gè)數(shù)據(jù)可視化的項(xiàng)目。
主要涉及技術(shù)：django基礎(chǔ)，python基礎(chǔ)，前端（html，echars）基礎(chǔ)。
這個(gè)項(xiàng)目自然而然是基于python邏輯語言處理的，因?yàn)槲覀兺瑢W(xué)在學(xué)習(xí)python的過程中經(jīng)常會(huì)到用python處理數(shù)據(jù)并對(duì)其經(jīng)行數(shù)據(jù)可視化的任務(wù)章節(jié)，其實(shí)我們不借助python的web框架也可以經(jīng)行數(shù)據(jù)可視化頁面，我們無論使用matplotlib或者pyechars也都可以基于python來實(shí)現(xiàn)，但是你會(huì)發(fā)現(xiàn)這樣的話我們需要一次一次分別點(diǎn)擊我們的文件代碼或者h(yuǎn)tml，略微繁瑣且不美觀，但是如果我們基于pythonweb的django框架來寫就會(huì)發(fā)現(xiàn)高效美觀許多，因?yàn)槲覀冎恍枰獑?dòng)django項(xiàng)目便可實(shí)現(xiàn)項(xiàng)目中含有的可視化頁面來展現(xiàn)。
如我們拿兩張圖來經(jīng)行簡(jiǎn)單的比較：
?如這張圖：我是在pycharm編譯器寫的，數(shù)據(jù)我用python語言處理完畢之后用echars做的可視化，我們?nèi)绻A(yù)覽頁面的話需要一個(gè)一個(gè)點(diǎn)擊打開html頁面經(jīng)行查看，但是我們?cè)倏聪旅孢@張使用django框架寫的，如下圖示：
?我們只需要啟動(dòng)django項(xiàng)目便可以使用導(dǎo)航欄目直達(dá)html頁面預(yù)覽，當(dāng)然這一步也是django的處理核心（MVC模式），在url路由指定頁面，在view里寫入方法函數(shù)即可。
另外在此說明一下我這里（本次）寫的項(xiàng)目是在kaggle數(shù)據(jù)拿的一個(gè)csv文件經(jīng)行數(shù)據(jù)簡(jiǎn)單清洗可視化的，大家也可以用數(shù)據(jù)來練手，如果數(shù)據(jù)想和數(shù)據(jù)庫sql有聯(lián)系的話，那就要在models文件里聲明字段類型，然后用到django的ORM架構(gòu)來實(shí)現(xiàn)，也很容易的，細(xì)節(jié)就在不再詳細(xì)說明了，本次博客旨在引導(dǎo)大家對(duì)django可視化的優(yōu)點(diǎn)和了解，下次我將會(huì)具體分析講解如何搭建django環(huán)境以及寫一個(gè)簡(jiǎn)單的django項(xiàng)目。
接下來我把項(xiàng)目結(jié)構(gòu)和代碼貼出來：
代碼（主要分享部分結(jié)構(gòu)）：
這是view方法類的合集，進(jìn)入頁面執(zhí)行方法：
from django.shortcuts import render
# Create your views here.
def kaggledata1(request):
return render(request, "kaggledata1.html")
def kaggledata2(request):
return render(request, "kaggledata2.html")
def kaggledata3(request):
return render(request, "kaggledata3.html")
這是url路由，進(jìn)入網(wǎng)址執(zhí)行方法：?
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('kaggle/data1/', views.kaggledata1),
path('kaggle/data2/', views.kaggledata2),
path('kaggle/data3/', views.kaggledata3),
]
這時(shí)數(shù)據(jù)處理的部分代碼：
# 可視化展現(xiàn) # 各頻道包含的節(jié)目數(shù)量占比 # 盤點(diǎn)最受歡迎的前10節(jié)目名稱+查看受眾最低的頻道ID encodings='utf-8' import csv import json filename = 'kaggledata.csv' selected_field_city = 'video_id' selected_values_city = [] with open(filename, 'r', encoding='utf-8') as csv_file: csv_reader = csv.DictReader(csv_file) for row in csv_reader: selected_values_city.append(row.get(selected_field_city)) distData = {} for job in selected_values_city: if distData.get(job, -1) == -1: distData[job] = 1 else: distData[job] += 1 result = [] for k, v in distData.items(): result.append({ "name": k, 'value': v }) data = result json_data1 = json.dumps(data) html_template = ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Example</title> <!-- 引入ECharts庫 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> </head> <body> <!-- 定義一個(gè)容器來呈現(xiàn)圖表 --> <div id="chart1" style="height:550px;"></div> <!-- 定義JavaScript代碼來配置和渲染圖表 --> <script type="text/javascript"> // 將JSON字符串解析為JavaScript對(duì)象 var data = JSON.parse('{}'); // 配置圖表 option = {{ title: {{ left: 'center' }}, tooltip: {{ trigger: 'item' }}, legend: {{ width:1000, bottom: 20, left: 20, }}, series: [ {{ type: 'pie', radius: '65%', center: ['80%', '50%'], selectedMode: 'single', data: data, emphasis: {{ itemStyle: {{ shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }} }} }} ] }}; // 創(chuàng)建圖表并呈現(xiàn)到容器中 var chart = echarts.init(document.getElementById('chart1')); chart.setOption(option); </script> </body> </html> ''' # 格式化HTML模板，將數(shù)據(jù)插入到JavaScript代碼中 html = html_template.format(json_data1) # 將HTML寫入到文件中 with open('videoid_count.html', 'w') as f: f.write(html) ############################################################################################################## # 盤點(diǎn)最受你歡迎的前20頻道節(jié)目合集 encodings='utf-8' import csv import json filename = 'kaggledata.csv' selected_field = 'channelTitle' selected_field_salary = 'view_count' selected_values = [] selected_values_salary=[] with open(filename, 'r', encoding='utf-8') as csv_file: csv_reader = csv.DictReader(csv_file) for row in csv_reader: selected_values.append(row.get(selected_field)) selected_values_salary.append(row.get(selected_field_salary)) dic={} for k,v in zip(selected_values, selected_values_salary): # 用zip()函數(shù)打包兩個(gè)列表中的元素 dic[k] = int(v) print(dic) dic1={} for k, v in sorted(dic.items(), key=lambda k: k[1], reverse=True)[:20]: print(f"'{k}' has a value of {v}") dic1[k]=v listx=[] listy=[] for k,v in dic1.items(): listx.append(k) listy.append(v) data={"x":listx,"y":listy} # 將數(shù)據(jù)轉(zhuǎn)換為JSON字符串 json_data = json.dumps(data) # 定義HTML文件模板 html_template = ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Example</title> <!-- 引入ECharts庫 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> </head> <body> <!-- 定義一個(gè)容器來呈現(xiàn)圖表 --> <div id="chart" style="width: 600px;height:400px;"></div> <!-- 定義JavaScript代碼來配置和渲染圖表 --> <script type="text/javascript"> // 將JSON字符串解析為JavaScript對(duì)象 var data = JSON.parse('{}'); // 配置圖表 option = {{ xAxis: {{ type: 'category', data: data.x, axisLabel: { interval: 0, rotate: 30 } }}, yAxis: {{ type: 'value' }}, series: [ {{ data: data.y, type: 'bar', showBackground: true, backgroundStyle: {{ color: 'rgba(180, 180, 180, 0.2)' }} }} ] }}; // 創(chuàng)建圖表并呈現(xiàn)到容器中 var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); </script> </body> </html> ''' # 格式化HTML模板，將數(shù)據(jù)插入到JavaScript代碼中 html = html_template.format(json_data) # 將HTML寫入到文件中 with open('likechannel.html', 'w') as f: f.write(html) ####################################################################################################################### # 盤點(diǎn)最不受眾的10大頻道節(jié)目 selected_field = 'channelTitle' selected_field_salary = 'view_count' selected_values = [] selected_values_salary=[] with open(filename, 'r', encoding='utf-8') as csv_file: csv_reader = csv.DictReader(csv_file) for row in csv_reader: selected_values.append(row.get(selected_field)) selected_values_salary.append(row.get(selected_field_salary)) dic={} for k,v in zip(selected_values, selected_values_salary): # 用zip()函數(shù)打包兩個(gè)列表中的元素 dic[k] = int(v) print(dic) dic1={} for k, v in sorted(dic.items(), key=lambda k: k[1], reverse=False)[:20]: print(f"'{k}' has a value of {v}") dic1[k]=v print(dic1) print("####################over") listx=[] listy=[] for k,v in dic1.items(): listx.append(k) listy.append(v) data={"x":listx,"y":listy} # 將數(shù)據(jù)轉(zhuǎn)換為JSON字符串 json_data = json.dumps(data) # 定義HTML文件模板 html_template = ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts Example</title> <!-- 引入ECharts庫 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script> </head> <body> <!-- 定義一個(gè)容器來呈現(xiàn)圖表 --> <div id="chart" style="width: 600px;height:400px;"></div> <!-- 定義JavaScript代碼來配置和渲染圖表 --> <script type="text/javascript"> // 將JSON字符串解析為JavaScript對(duì)象 var data = JSON.parse('{}'); // 配置圖表 option = {{ xAxis: {{ type: 'category', data: data.x, axisLabel: { interval: 0, rotate: 30 } }}, yAxis: {{ type: 'value' }}, series: [ {{ data: data.y, type: 'bar', showBackground: true, backgroundStyle: {{ color: 'rgba(180, 180, 180, 0.2)' }} }} ] }}; // 創(chuàng)建圖表并呈現(xiàn)到容器中 var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); </script> </body> </html> ''' # 格式化HTML模板，將數(shù)據(jù)插入到JavaScript代碼中 html = html_template.format(json_data) # 將HTML寫入到文件中 with open('dislikechannel.html', 'w') as f: f.write(html)
項(xiàng)目結(jié)構(gòu)和效果圖：?
?
文章來源：http://www.zghlxwxcb.cn/news/detail-537931.html
?好啦，今天的分享就到此了，如果需要這個(gè)項(xiàng)目的同學(xué)可以私信我，我會(huì)把源代碼文件（含csv數(shù)據(jù)）一起打包發(fā)給你，另外如果需要django可視化項(xiàng)目作業(yè)的同學(xué)也可以私信我。文章來源地址http://www.zghlxwxcb.cn/news/detail-537931.html
到了這里，關(guān)于基于django的數(shù)據(jù)可視化展現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
