Визуализация данных с помощью Chartjs и Django

Опубликовано: 26 Июня, 2021

Предварительное условие: установка django
По мере роста объемов данных визуализация данных становится важной частью импорта, здесь мы будем реализовывать диаграммы для наших данных в наших веб-приложениях, используя chartjs с django. Django - это веб-фреймворк на основе веб-фреймворка Python высокого уровня, а chartjs - это простой способ добавить анимированные интерактивные графики.

Необходимые модули:

django: установить django

djangorestframework

 $ pip установить djangorestframework

базовая настройка:

Запустите проект с помощью следующей команды -

 $ django-admin диаграммы startproject

Сменить каталог на графики -

графики $ cd

Запустите сервер. Запустите сервер, набрав следующую команду в терминале -

 $ python manage.py runserver

Чтобы проверить, запущен ли сервер или нет, откройте веб-браузер и введите 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 шаблоны / chartjs && cd templates / chartjs && touch index.html

Откройте папку проекта с помощью текстового редактора. Структура каталогов должна выглядеть так:

Теперь добавьте приложение chartjs и rest_framework в свои диаграммы в settings.py .

Отредактируйте файл 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()),
 ]

Отредактируйте views.py в chartjs:

 # 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 и отредактируйте его.

 <!DOCTYPE html>
 < html lang = "en" dir = "ltr" >
 
< head >
  < meta charset = "utf-8" >
  < title >chatsjs</ title >
  <!-- Latest compiled and minified CSS -->
  < link rel = "stylesheet" href = " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css " >
 
  <!-- jQuery library -->
  < script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " ></ script >
 
  <!-- Latest compiled JavaScript -->
  < script src = " https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js " ></ script >
 
 
 
</ head >
 
< body class = "container-fluid" >
  < center class = "row" >
    < h1 >implementation of < b >chartJS</ b > using < b >django</ b ></ h1 >
  </ center >
  < hr />
  < div class = "row" >
    < div class = "col-md-6" >
      < canvas id = "myChartline" ></ canvas >
    </ div >
    < div class = "col-md-6" >
      < canvas id = "myChartBar" ></ canvas >
    </ div >
  </ div >
 
  < script src = " https://cdn.jsdelivr.net/npm/chart.js@2.8.0 " ></ script >
 
  < script >
    var endpoint = '/api';
 
    $.ajax({
      method: "GET",
      url: endpoint,
      success: function(data) {
        drawLineGraph(data, 'myChartline');
        drawBarGraph(data, 'myChartBar');
        console.log("drawing");
      },
      error: function(error_data) {
        console.log(error_data);
      }
    })
 
 
    function drawLineGraph(data, id) {
      var labels = data.labels;
      var chartLabel = data.chartLabel;
      var chartdata = data.chartdata;
      var ctx = document.getElementById(id).getContext('2d');
      var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',
 
        // The data for our dataset
        data: {
          labels: labels,
          datasets: [{
            label: chartLabel,
            backgroundColor: 'rgb(255, 100, 200)',
            borderColor: 'rgb(55, 99, 132)',
            data: chartdata,
          }]
        },
 
        // Configuration options go here
        options: {
          scales: {
            xAxes: [{
              display: true
            }],
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
 
      });
    }
 
    function drawBarGraph(data, id) {
      var labels = data.labels;
      var chartLabel = data.chartLabel;
      var chartdata = data.chartdata;
      var ctx = document.getElementById(id).getContext('2d');
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
          labels: labels,
          datasets: [{
            label: chartLabel,
            data: chartdata,
            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: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    }
  </ script >
 </ body >
 
</ html > 

Сделайте миграции и перенесите его:

$ python manage.py makemigrations
$ python manage.py мигрировать

Теперь вы можете запустить сервер, чтобы увидеть свое приложение:

 $ python manage.py runserver

Внимание компьютерщик! Укрепите свои основы с помощью базового курса программирования Python и изучите основы.

Для начала подготовьтесь к собеседованию. Расширьте свои концепции структур данных с помощью курса Python DS. А чтобы начать свое путешествие по машинному обучению, присоединяйтесь к курсу Машинное обучение - базовый уровень.

Визуализация данных с помощью Chartjs и Django

РЕКОМЕНДУЕМЫЕ СТАТЬИ