在Django中开始使用Chart.js
Chart.js是一个开源的基于HTML5的JavaScript库，用于在HTML5画布上渲染图表。通过Chart.js，你可以使用多种图表来实现数据的可视化，比如线图、条形图、散点图等等。
现在有几个用于数据可视化的库，如[Django Highcharts]和[Plotly.js]。
为什么选择Chart.js？
Chart.js相当灵活，易于设置。另外，你可以从大约八种不同的图表类型中选择。这个项目在GitHub上有超过55K颗星。与其他库相比，开发者们更喜欢Chart.js，因为。
- 图表是动画的。
- 图表是可定制的。
- Chart.js包含几个扩展，用于提高交互性。
在本教程中，我们将通过建立一个简单的项目来研究如何在Django中集成Chart.js。
前提条件
要继续学习本教程，你需要在你的机器上安装[Python3]。
对Django有一点了解将有助于读者更好地跟上。
创建和设置一个新的Django项目
让我们从创建一个新的虚拟环境开始。
虚拟环境允许你在你的电脑上创建一个虚拟空间。
通过创建一个虚拟环境，你将能够为一个项目分开安装必要的库，而不需要全局安装它们。
现在，通过运行下面的命令创建一个虚拟环境env 。
python -m venv env
在这里，我们告诉 Python 在当前目录下一个名为env 的文件夹中创建虚拟环境。
创建后，使用下面的命令激活虚拟环境。
source env/bin/activate
激活环境后，使用下面的命令安装Django。
pip install django
现在，让我们创建一个新的Django项目Django-charts ，使用。
django-admin startproject Django-charts
然后，导航到Django-charts 目录并创建一个Django应用程序。
cd Django-charts
django-admin startapp charts
让我们把我们的应用程序添加到已经安装的应用程序列表中。
导航到Django-charts 目录并编辑settings.py 文件。
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'editors',
]
创建一个模型
Django中的模型是一个代表单个表或数据库的类。它可以用来动态加载数据到一个项目中。
在本教程中，我们将学习如何创建一个图表，将不同文本编辑器的使用趋势可视化。
对于我们的模型，我们将创建两个字段：用户字段num_users 和文本编辑器字段editor_name 。
在editors 目录下，在models.py 文件中复制并粘贴以下代码。
from django.db import models
#defining a simple class
class Editors(models.Model):
editor_name = models.CharField(max_length=200)
num_users = models.IntegerField()
def __str__(self):
return "{}-{}".format(self.editor_name, self.num_users)
现在，让我们在admin.py 文件中注册模型Editors ，这样我们就可以在Django管理部分修改它。
from django.contrib import admin
from .models import Editors
admin.site.register(Editors)
接下来，我们需要将我们的模型迁移到数据库中。
迁移是Django将你对模型所做的修改发布到数据库模式的方式。因此，当创建一个新的模型时，我们迁移到数据库中创建所需的表。
接下来，我们通过运行下面的命令来迁移我们的模型。
python manage.py makemigrations # migrating the app and database changes
python manage.py migrate # final migrations
一个超级用户拥有在Django管理中创建、编辑、更新和删除数据的权限。
通过运行下面的命令创建一个超级用户。
python manage.py createsuperuser
现在，我们可以登录到管理页面了。
要登录到管理区，请再次为应用程序提供服务，进入http://localhost:8000/admin ，用你的超级用户凭证登录。
Django管理员登录页面
Django管理页面
现在，让我们在Editors 类别中添加一个编辑器，以测试它是否没有错误。
点击编辑器，然后点击Add Editor ，添加一个编辑器。
添加编辑器
创建一个视图
Django中的视图基本上是一个接受网络请求并返回网络响应的函数。
网络响应可以是一个错误页面、重定向、图片，甚至是HTML内容。
现在，让我们通过在我们的view.py 文件中添加以下内容来创建一个视图。
from django.shortcuts import render
from django.views.generic import TemplateView
from .models import Editors
# Creating views
class EditorChartView(TemplateView):
template_name = 'editors/chart.html'
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["qs"] = Editors.objects.all()
return context
我们还没有创建我们的chart.html 文件。
让我们通过在我们的editors 目录中创建一个模板文件夹来创建它。该文件目录应该看起来像templates/editors/chart.html 。
创建模板
我们首先在我们的基本目录中创建一个模板目录。这个模板目录将存放我们的base.html 文件。
base.html 它基本上是应用程序中所有页面的骨架。
我们应该有这样的东西：django-charts/templates/base.html 。
接下来，我们在base.html 文件中添加以下几行代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Chart js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>Text-Editor/IDE Charts</title>
</head>
<body>
{%block scripts%}
{%endblock scripts%}
{%block content%}
{%endblock content%}
</body>
</html>
接下来，我们需要将DIRS 更新为我们的settings.py 文件中的模板文件夹的路径。
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
现在，打开我们先前创建的chart.html 文件，添加以下代码。
{% extends 'base.html'%}
{%block scripts%}
<script>
// jquery function
$(document).ready(function(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: [{%for data in qs%}'{{data.editor_name}}',{%endfor%}] //loop through queryset,
datasets: [{
label: '# of users',
data: [{%for data in qs%}{{data.num_users}},{%endfor%}],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
});
</script>
{%endblock scripts%}
{%block content%}
<!-- displaying the chart -->
<!-- you can also play around with the width and height to increase or decrease the chart size -->
<canvas id="myChart" width="400" height="100"></canvas>
{%endblock content%}
在上面的代码中，我们正在用从后台传来的数据替换样本数据。
接下来，我们编辑我们的urls.py ，添加以下代码。
from django.contrib import admin
from django.urls import path
from editors.views import EditorChartView
urlpatterns = [
path('admin/', admin.site.urls),
path('', EditorChartView.as_view(), name='index')
]
现在，让我们为我们的Django管理员添加几个文本编辑器和一些用户。
添加新的文本编辑器
让我们用以下命令启动服务器来测试一下。
python manage.py runserver
显示饼状图
结论
最后，我们已经了解了Chart.js。我们还学习了如何在Django应用程序中整合图表。
在本教程中，我们学习了如何使用doughnut 图表类型。你还可以使用其他的图表类型。
