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()

并將原始數據存儲在數據庫中：城市

ID

名稱

country_id

人口

1

東京

28

36,923,000

2

上海

13

34,000,000

3

雅加達

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

達卡

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

臺灣

示例1：餅圖

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

我們將返回圖表數據作為視圖上下文的一部分，并使用Django模板語言將結果注入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并構建的列表labels和data。在這種情況下，這里data是City模型中保存的人口計數。

對于urls.py一個簡單的路由：

urls.py

from django.urls import pathfrom mysite.core import viewsurlpatterns = [path('pie-chart/', views.pie_chart, name='pie-chart'),]

現在是模板。我從Chart.js餅圖文檔中獲得了一個基本片段。

pie_chart.html

{% extends 'base.html' %}{% block content %}

{% endblock %}

在上面的示例中，base.html模板并不重要，但是您可以在本文結尾處共享的代碼示例中看到它。這種策略不是理想的，但是效果很好。不好的是，我們正在使用Django模板語言來干擾JavaScript邏輯。當我們放置時，我們直接在JavaScript代碼中注入來自服務器的變量，如{{?data|safe}}

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

示例2：使用Ajax的條形圖

如標題所示，我們現在將使用異步調用來繪制條形圖。

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,})

因此，這里我們使用兩個視圖函數。該home視圖將是加載圖表的主頁。另一個視圖population_chart將是唯一負責提供數據的視圖，返回帶有標簽和數據的JSON格式響應數據。如果您想知道此查詢集在做什么，它將按國家對城市進行分組，并匯總每個國家的總人口。結果將是國家/地區總人口列表。要了解有關這種查詢的更多信息，請查看：Django基礎(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 %}

現在我們前端和后端有了更好的分離，可以先查看下圖表容器：

我們添加了獲取數據的data-url。稍后，我們將使用它來執行Ajax調用。

var $populationChart = $("#population-chart");$.ajax({url: $populationChart.data("url"),success: function (data) {// 生成bar圖標實例，展示data。}});

success以后，在回調內部，我們最終使用JsonResponse數據執行與Chart.js相關的代碼, 展示效果如下圖所示：

小結

我希望本教程可以幫助您開始使用Chart.js處理圖表。不久前，我使用Highcharts庫發布了

關于同一主題的另一篇教程。方法大致相同：如何將Highcharts.js與Django集成。

如果您想獲取本教程中使用的代碼，可以在這里找到：

github.com/sibtc/django-chartjs-example。

大江狗翻譯整理,原作Vitor Freitas

總結

以上是生活随笔為你收集整理的python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。