Django是一个强大的Python Web框架，使构建Web应用程序和仪表板变得轻而易举。有一些由Django构建的开源仪表板，配备了现代UI套件，开发人员可以在Django应用中创建分析仪表板。在本文中，让我们探索如何使用Bootstrap，CanvasJS Python Charts和其他一些工具在Django构建美丽的仪表板。
项目设置
创建一个新的Django项目。并在项目中创建一个新应用。
django-admin startproject dashboard
python manage.py startapp charts
创建视图
在“ views.py”图表应用中创建一个新文件。在此文件中，我们将定义将呈现仪表板的视图。这是一个示例视图，该视图呈现一个称为index.html
的模板
from django.shortcuts import render
def dashboard(request):
return render(request, 'index.html')
创建模板
在“图表/模板”目录中创建一个名为dashboard.html的新文件。使用Bootstrap定义仪表板的布局。
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<!-- Sidebar content goes here -->
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- Main content goes here -->
</main>
</div>
</div>
将图表添加到仪表板
canvasjs是一个强大的图表库，可让您为仪表板创建交互式图表。要将Canvasjs图表添加到项目中，请下载库并将其包含在模板中。
- 从Canvasjs网站下载图书馆。
- 将文件提取到“图表/静态”文件夹。
- 在模板中包含canvasjs.min.js。
<script src="{% static canvasjs.min.js' %}"></script>
创建图表
现在，该canvasjs包含在模板中，您可以开始创建不同的图表，例如行，列，派等。以在仪表板中显示它们。
/* index.html */
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Column Chart"
},
data: [{
dataPoints: {{ datapoints | safe }}
});
chart.render();
}
</script>
更新视图以返回图表的数据。
/* views.py */
from django.http import HttpResponse
from django.shortcuts import render
from django.template import loader
def index(request):
datapoints= [
{ "label": "Jan", "y": 10000 },
{ "label": "Feb", "y": 30162 },
{ "label": "Mar", "y": 26263 },
{ "label": "Apr", "y": 18394 },
{ "label": "May", "y": 18287 },
{ "label": "Jun", "y": 28682 },
{ "label": "Jul", "y": 31274 },
{ "label": "Aug", "y": 33259 },
{ "label": "Sep", "y": 25849 },
{ "label": "Oct", "y": 24159 },
{ "label": "Nov", "y": 32651 },
{ "label": "Dec", "y": 31984 }
]
return render(request, 'index.html', { "datapoints" : datapoints })
自定义仪表板
现在，您已经在仪表板上添加了一个图表，添加更多图表并自定义图表的外观和感觉以匹配仪表板。您可以更改图表的所有文本内容的颜色和字体家庭，以将其与仪表板的主题匹配。
github链接：https://github.com/vishwas-r/Django-Dashboard-using-CanvasJS-Python-Charts