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ù)庫中：城市

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

國家

ID

名稱

1

巴西

2

土耳其

3

意大利

4

孟加拉國

5

加拿大

6

法國

7

秘魯

8

阿根廷

9

奈及利亞

10

澳大利亞

11

伊朗

12

新加坡

13

中國

14

智利

15

泰國

16

德國

17

西班牙

18

菲律賓

19

印度尼西亞

20

美國

21

南韓

22

巴基斯坦

23

安哥拉

24

墨西哥

25

印度

26

英國

27

哥倫比亞

28

日本

29

臺(tái)灣

示例1：餅圖

對(duì)于第一個(gè)示例，我們僅要檢索人口最多的前5個(gè)城市，并將其以餅圖形式呈現(xiàn)。在這種策略中，

我們將返回圖表數(shù)據(jù)作為視圖上下文的一部分，并使用Django模板語言將結(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模板語言來干擾JavaScript邏輯。當(dāng)我們放置時(shí)，我們直接在JavaScript代碼中注入來自服務(wù)器的變量，如{{?data|safe}}

上面的代碼展示效果如下所示：

示例2：使用Ajax的條形圖

如標(biāo)題所示，我們現(xiàn)在將使用異步調(diào)用來繪制條形圖。

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視圖將是加載圖表的主頁。另一個(gè)視圖population_chart將是唯一負(fù)責(zé)提供數(shù)據(jù)的視圖，返回帶有標(biāo)簽和數(shù)據(jù)的JSON格式響應(yīng)數(shù)據(jù)。如果您想知道此查詢集在做什么，它將按國家對(duì)城市進(jìn)行分組，并匯總每個(gè)國家的總?cè)丝凇＝Y(jié)果將是國家/地區(qū)總?cè)丝诹斜?。要了解有關(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。稍后，我們將使用它來執(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庫發(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ǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。