python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表
class Country(models.Model):name = models.CharField(max_length=30)class City(models.Model):name = models.CharField(max_length=30)country=models.ForeignKey(Country,?on_delete=models.CASCADE)population = models.PositiveIntegerField()
并將原始數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)中：城市
ID
名稱
country_id
人口
1
東京
28
36,923,000
2
上海
13
34,000,000
3
雅加達(dá)
19
30,000,000
4
漢城
21
25,514,000
5
廣州
13
25,000,000
6
北京
13
24,900,000
7
卡拉奇
22
24,300,000
8
深圳
13
23,300,000
9
新德里
25
21,753,486
10
墨西哥城
24
21,339,781
11
拉各斯
9
21,000,000
12
圣保羅
1
20,935,204
13
孟買
25
20,748,395
14
紐約市
20
20,092,883
15
大阪
28
19,342,000
16
武漢市
13
19,000,000
17
成都市
13
18,100,000
18
達(dá)卡
4
17,151,925
19
重慶市
13
17,000,000
20
天津
13
15,400,000
21
加爾各答
25
14,617,882
國(guó)家
ID
名稱
1
巴西
2
土耳其
3
意大利
4
孟加拉國(guó)
5
加拿大
6
法國(guó)
7
秘魯
8
阿根廷
9
奈及利亞
10
澳大利亞
11
伊朗
12
新加坡
13
中國(guó)
14
智利
15
泰國(guó)
16
德國(guó)
17
西班牙
18
菲律賓
19
印度尼西亞
20
美國(guó)
21
南韓
22
巴基斯坦
23
安哥拉
24
墨西哥
25
印度
26
英國(guó)
27
哥倫比亞
28
日本
29
臺(tái)灣
示例1：餅圖
對(duì)于第一個(gè)示例，我們僅要檢索人口最多的前5個(gè)城市，并將其以餅圖形式呈現(xiàn)。在這種策略中，
我們將返回圖表數(shù)據(jù)作為視圖上下文的一部分，并使用Django模板語(yǔ)言將結(jié)果注入JavaScript
代碼中。
views.py
from django.shortcuts import renderfrom mysite.core.models import Citydef pie_chart(request):labels = []data = []queryset = City.objects.order_by('-population')[:5]for city in queryset:labels.append(city.name)data.append(city.population)return render(request, 'pie_chart.html', {'labels': labels,'data': data,})
基本上在上面的視圖中，我們遍歷Cityqueryset并構(gòu)建的列表labels和data。在這種情況下，這里data是City模型中保存的人口計(jì)數(shù)。
對(duì)于urls.py一個(gè)簡(jiǎn)單的路由：
urls.py
from django.urls import pathfrom mysite.core import viewsurlpatterns = [path('pie-chart/', views.pie_chart, name='pie-chart'),]
現(xiàn)在是模板。我從Chart.js餅圖文檔中獲得了一個(gè)基本片段。
pie_chart.html
{% extends 'base.html' %}{% block content %}
{% endblock %}在上面的示例中，base.html模板并不重要，但是您可以在本文結(jié)尾處共享的代碼示例中看到它。這種策略不是理想的，但是效果很好。不好的是，我們正在使用Django模板語(yǔ)言來(lái)干擾JavaScript邏輯。當(dāng)我們放置時(shí)，我們直接在JavaScript代碼中注入來(lái)自服務(wù)器的變量，如{{?data|safe}}
上面的代碼展示效果如下所示：
示例2：使用Ajax的條形圖
如標(biāo)題所示，我們現(xiàn)在將使用異步調(diào)用來(lái)繪制條形圖。
views.py
from django.shortcuts import renderfrom django.db.models import Sumfrom django.http import JsonResponsefrom mysite.core.models import Citydef home(request):return render(request, 'home.html')def population_chart(request):labels = []data = []queryset = City.objects.values('country__name').annotate(country_population=Sum('population')).order_by('-country_population')for entry in queryset:labels.append(entry['country__name'])data.append(entry['country_population'])return JsonResponse(data={'labels': labels,'data': data,})
因此，這里我們使用兩個(gè)視圖函數(shù)。該home視圖將是加載圖表的主頁(yè)。另一個(gè)視圖population_chart將是唯一負(fù)責(zé)提供數(shù)據(jù)的視圖，返回帶有標(biāo)簽和數(shù)據(jù)的JSON格式響應(yīng)數(shù)據(jù)。如果您想知道此查詢集在做什么，它將按國(guó)家對(duì)城市進(jìn)行分組，并匯總每個(gè)國(guó)家的總?cè)丝凇＝Y(jié)果將是國(guó)家/地區(qū)總?cè)丝诹斜怼Ｒ私庥嘘P(guān)這種查詢的更多信息，請(qǐng)查看：Django基礎(chǔ)(24): aggregate和annotate方法使用詳解與示例
urls.py
from django.urls import pathfrom mysite.core import viewsurlpatterns = [path('', views.home, name='home'),path('population-chart/', views.population_chart, name='population-chart'),]
home.html
{% extends 'base.html' %}{% block content %}
{% endblock %}現(xiàn)在我們前端和后端有了更好的分離，可以先查看下圖表容器：
我們添加了獲取數(shù)據(jù)的data-url。稍后，我們將使用它來(lái)執(zhí)行Ajax調(diào)用。
var $populationChart = $("#population-chart");$.ajax({url: $populationChart.data("url"),success: function (data) {// 生成bar圖標(biāo)實(shí)例，展示data。}});
success以后，在回調(diào)內(nèi)部，我們最終使用JsonResponse數(shù)據(jù)執(zhí)行與Chart.js相關(guān)的代碼, 展示效果如下圖所示：
小結(jié)
我希望本教程可以幫助您開始使用Chart.js處理圖表。不久前，我使用Highcharts庫(kù)發(fā)布了
關(guān)于同一主題的另一篇教程。方法大致相同：如何將Highcharts.js與Django集成。
如果您想獲取本教程中使用的代碼，可以在這里找到：
github.com/sibtc/django-chartjs-example。
大江狗翻譯整理,原作Vitor Freitas
總結(jié)
以上是生活随笔為你收集整理的python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： jupyter 数据分析可视化案例_Py
- 下一篇： python 求厉害数