📜  使用 Chartjs 和 Django 进行数据可视化

📅  最后修改于: 2021-10-21 05:33:44             🧑  作者: Mango

先决条件: django安装
随着数据的增长,数据可视化成为这里的重要组成部分,我们将使用带有 django 的 chartjs 在我们的 Web 应用程序中为我们的数据实现图表。 Django是一个基于Python Web 框架的高级 Web 框架,而chartjs是一种包含动画、交互式图形的简单方法。

所需模块:

  • django :安装 django
  • djangorest框架
    $ pip install djangorestframework

基本设置:

通过以下命令启动一个项目 –

$ django-admin startproject charts

将目录更改为图表 –

$ cd charts

启动服务器 – 通过在终端中键入以下命令启动服务器 –

$ python manage.py runserver

要检查服务器是否正在运行,请转到 Web 浏览器并输入http://127.0.0.1:8000/作为 URL。

现在按 ctrl+C 停止服务器

现在让我们创建一个应用程序。

$ python manage.py startapp chartjs

通过执行以下操作转到 chartjs/ 文件夹:

$ cd chartjs

并创建一个包含 index.html 文件的文件夹:templates/chartjs/index.html

$ mkdir -p templates/chartjs && cd templates/chartjs && touch index.html

使用文本编辑器打开项目文件夹。目录结构应如下所示:

现在在settings.py的图表中添加chartjs app 和rest_framework

在图表中编辑 urls.py 文件:

from django.contrib import admin
from django.urls import path
from chartjs import views
  
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.HomeView.as_view()),
    # path('test-api', views.get_data),
    path('api', views.ChartData.as_view()),
]

在 chartjs 中编辑 views.py :

# from django.http import JsonResponse
   
from django.shortcuts import render
from django.views.generic import View
   
from rest_framework.views import APIView
from rest_framework.response import Response
   
class HomeView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'chartjs/index.html')
   
   
####################################################
   
## if you don't want to user rest_framework
   
# def get_data(request, *args, **kwargs):
#
# data ={
#             "sales" : 100,
#             "person": 10000,
#     }
#
# return JsonResponse(data) # http response
   
   
#######################################################
   
## using rest_framework classes
   
class ChartData(APIView):
    authentication_classes = []
    permission_classes = []
   
    def get(self, request, format = None):
        labels = [
            'January',
            'February', 
            'March', 
            'April', 
            'May', 
            'June', 
            'July'
            ]
        chartLabel = "my data"
        chartdata = [0, 10, 5, 2, 20, 30, 45]
        data ={
                     "labels":labels,
                     "chartLabel":chartLabel,
                     "chartdata":chartdata,
             }
        return Response(data)

导航到 templates/chartjs/index.html 并进行编辑。



  

  
  chatsjs
  
  
  
  
  
  
  
  
  
  
  

  

  
    

implementation of chartJS using django

  
  
  
    
           
    
           
  
              

进行迁移并迁移它:

$ python manage.py makemigrations
$ python manage.py migrate

现在您可以运行服务器来查看您的应用程序:

$ python manage.py runserver