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()
并将原始数据存储在数据库中：城市
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 联用做出精美的图表的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： jupyter 数据分析可视化案例_Py
- 下一篇： python 求厉害数