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ù)存儲在數(shù)據(jù)庫中：城市
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個城市，并將其以餅圖形式呈現(xiàn)。在這種策略中，
我們將返回圖表數(shù)據(jù)作為視圖上下文的一部分，并使用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模型中保存的人口計數(shù)。
對于urls.py一個簡單的路由：
urls.py
from django.urls import pathfrom mysite.core import viewsurlpatterns = [path('pie-chart/', views.pie_chart, name='pie-chart'),]
現(xiàn)在是模板。我從Chart.js餅圖文檔中獲得了一個基本片段。
pie_chart.html
{% extends 'base.html' %}{% block content %}
{% endblock %}在上面的示例中，base.html模板并不重要，但是您可以在本文結尾處共享的代碼示例中看到它。這種策略不是理想的，但是效果很好。不好的是，我們正在使用Django模板語言來干擾JavaScript邏輯。當我們放置時，我們直接在JavaScript代碼中注入來自服務器的變量，如{{?data|safe}}
上面的代碼展示效果如下所示：
示例2：使用Ajax的條形圖
如標題所示，我們現(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,})
因此，這里我們使用兩個視圖函數(shù)。該home視圖將是加載圖表的主頁。另一個視圖population_chart將是唯一負責提供數(shù)據(jù)的視圖，返回帶有標簽和數(shù)據(jù)的JSON格式響應數(shù)據(jù)。如果您想知道此查詢集在做什么，它將按國家對城市進行分組，并匯總每個國家的總?cè)丝凇＝Y果將是國家/地區(qū)總?cè)丝诹斜怼Ｒ私庥嘘P這種查詢的更多信息，請查看：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 %}現(xiàn)在我們前端和后端有了更好的分離，可以先查看下圖表容器：
我們添加了獲取數(shù)據(jù)的data-url。稍后，我們將使用它來執(zhí)行Ajax調(diào)用。
var $populationChart = $("#population-chart");$.ajax({url: $populationChart.data("url"),success: function (data) {// 生成bar圖標實例，展示data。}});
success以后，在回調(diào)內(nèi)部，我們最終使用JsonResponse數(shù)據(jù)執(zhí)行與Chart.js相關的代碼, 展示效果如下圖所示：
小結
我希望本教程可以幫助您開始使用Chart.js處理圖表。不久前，我使用Highcharts庫發(fā)布了
關于同一主題的另一篇教程。方法大致相同：如何將Highcharts.js與Django集成。
如果您想獲取本教程中使用的代碼，可以在這里找到：
github.com/sibtc/django-chartjs-example。
大江狗翻譯整理,原作Vitor Freitas
總結
以上是生活随笔為你收集整理的python 图表 web_Web | Django 与 Chart.js 联用做出精美的图表的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jupyter 数据分析可视化案例_Py
- 下一篇： mysql设置参数0和1_MySQL 8