数据可视化是以图形或图形格式表示数据以更好地理解和解释数据的过程。在当今的数字时代,Web应用程序是信息交换的主要媒介。因此,将数据可视化集成到Web应用程序中至关重要。
在本文中,我们将探讨如何将CanvasJS Python chart集成到Django应用程序中,以创建交互式和视觉上吸引人的数据可视化。
先决条件
我们假设您对Django有基本的了解,并且已经设置了Django项目。我们还将假设您通过从官方网站下载库来安装了最新版本的Canvasjs。
创建Django应用程序
首先,通过运行以下命令在项目中创建一个新的Django应用:
python manage.py startapp charts
这将在您的项目中创建一个名为“图表”的新目录。
创建视图
接下来,在“图表/views.py”文件中创建一个视图,以在网页上渲染图表。这是一个示例视图,该视图使用Canvasjs库创建线路图:
from django.shortcuts import render
def chart(request):
dataPoints = [
{"x": 10, "y": 21},
{"x": 20, "y": 25},
{"x": 30, "y": 20},
{"x": 40, "y": 35},
{"x": 50, "y": 38},
{"x": 60, "y": 45},
{"x": 70, "y": 50},
{"x": 80, "y": 55},
{"x": 90, "y": 60},
{"x": 100, "y": 58}
]
return render(request, 'index.html', {'dataPoints': dataPoints})
此视图创建数据点列表,并使用Render()函数将其传递给图表模板。请注意,我们正在使用渲染图表的“ index.html”模板。
创建一个模板
现在在“图表/模板/图表”目录中创建“ index.html”模板。该模板将包含HTML和JavaScript代码,以使用Canvasjs库渲染图表。这是创建线路图的示例模板:
{% load static %}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light1", // "light2", "dark1", "dark2"
animationEnabled: false, // change to true
title:{
text: "Python Line Chart"
},
data: [{
// Change type to "bar", "area", "spline", "pie",etc.
type: "line",
dataPoints: {{ data_points | safe }}
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="width: 100%; height: 360px;"></div>
</body>
</html>
配置URL并运行应用程序
最后,将URL添加到“图表/urls.py”文件中,以将“图表”视图映射到URL。这是示例URL配置:
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
]
运行django服务器python manage.py runserver
。导航到Web浏览器中的“ http://localhost:8000/charts/”,您应该看到Canvasjs库生成的线路图。
github:https://github.com/vishwas-r/CanvasJS-Samples/tree/main/canvasjs-django-sample