Автор оригинала: Veronika Rovnik.
Привет народ!
Python , Визуализация данных и Программирование Темы, к которым я глубоко предан. Вот почему я хотел бы поделиться с вами своими идеями, а также моим энтузиазмом для обнаружения новых способов представить данные значимым образом.
Дело, я собираюсь накрыть, довольно распространено: у вас есть данные на заднем конце вашего приложения и хотите дать ему форму на переднем конце. Если такая ситуация звучит вам знакомо, то этот учебник может пригодиться.
После того, как вы завершите его, у вас будет Django-Powered App с интерактивным поворотные столы & Графики Отказ
Предпосылки
Чтобы уверенно пройти по ступенькам, вам нужно базовые знания структуры Django и Немного творчества Отказ ✨.
Чтобы следовать, вы можете скачать Образец github Отказ
Вот краткий список инструментов, которые мы собираемся использовать:
- Python 3.7.4
- Django
- Виртуаль
- FlexMonser Pivot Table & Charts (JavaScript Библиотека)
- SQLite.
Если вы уже создали проект Django и почувствуете уверенность в базовом потоке создания приложений, вы можете прыгать прямо к Подключение данных к Flexmonster Раздел, который объясняет, как добавить компоненты визуализации данных.
Давайте начнем!
Начало работы с Джанго
Первые вещи сначала давайте убедитесь, что вы установили Django на вашу машину. Время большого пальца – установить его в ранее настроить виртуальную среду – мощный инструмент для того, чтобы изолировать ваши проекты друг от друга.
Кроме того, убедитесь, что вы активировали в недавно созданном каталоге. Откройте консоль и загрузочный проект Django с этой командой:
Django-Admin StartProject Analytics_Project
Теперь есть новый каталог, называемый Analytics_Project Отказ Давайте проверим, сделали ли мы все правильно. Перейти к Analytics_Project И запустите сервер с командой консоли:
Python Manage.py Runserver
Открыть http://127.0.0.1:8000/ в вашем браузере. Если вы видите эту потрясающую ракету, то все в порядке:
Далее создайте новое приложение в вашем проекте. Давайте назовем это Приборная панель :
Python Manage.py StartApp приборная панель
Вот так. Теперь мы видим новый каталог в рамках проекта. Он содержит следующие файлы:
__init__.py сделать Python относиться к этому как пакет
admin.py – Настройки для страниц администратора Django
Apps.py – Настройки для конфигурации приложения
Models.py – Классы, которые будут преобразованы в таблицы баз данных по ORM Django
Tests.py – Тестовые классы
просмотр .py – Функции и классы, которые определяют, как данные отображаются в шаблонах
После этого необходимо зарегистрировать приложение в проекте. Перейти к analytics_project/settings.py и добавить имя приложения к Stall_apps список:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'dashboard',
]Теперь наш проект знает о существовании приложения.
Взгляды
В Приборная панель/просмотр .py , мы создадим функцию, которая направляет пользователя к конкретным шаблонам, определенным в Приборная панель/шаблоны папка. Представления могут содержать классы.
Вот как мы определяем это:
from django.http import JsonResponse
from django.shortcuts import render
from dashboard.models import Order
from django.core import serializers
def dashboard_with_pivot(request):
return render(request, 'dashboard_with_pivot.html', {})После вызванного эта функция сделает Dashboard_with_pivot.html – Шаблон, который мы скоро определимся. Он будет содержать компоненты Pivot Table и Pivot Charts.
Еще несколько слов об этой функции. Его Запрос аргумент, экземпляр Httprequestobject Содержит информацию о запросе, например, используемый метод HTTP (Get или Post). Метод оказывать Ищеты шаблонов HTML в Шаблоны каталог, расположенный внутри каталога приложения.
Нам также необходимо создать вспомогательный метод, который отправляет ответ с данными на таблицу Pivot на переднем конце приложения. Давайте назовем это pivot_data :
def pivot_data(request):
dataset = Order.objects.all()
data = serializers.serialize('json', dataset)
return JsonResponse(data, safe=False)Скорее всего, ваш IDE говорит вам, что он не может найти ссылку Заказать в Models.py Отказ Нет проблем – мы будем иметь дело с этим позже.
Шаблоны
На данный момент мы воспользуемся системой шаблона Django.
Давайте создадим новый каталог Шаблоны внутри Приборная панель и создать первый шаблон HTML под названием Dashboard_with_pivot.html Отказ Он будет отображаться пользователю по запросу. Здесь мы также добавляем сценарии и контейнеры для компонентов визуализации данных:
Dashboard with Flexmonster
Сопоставление видов функций для URL-адресов
Для вызова представлений и дисплея отображаются HTML-шаблоны пользователю, нам нужно отобразить представления на соответствующие URL-адреса.
Перейти к Analytics_app/urls.py и добавить соответствующие конфигурации для Приборная панель приложение на уровне проекта.
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('dashboard/', include('dashboard.urls')),
]
Теперь URL-адреса от Приборная панель Приложение может быть доступно, но только если они префиксированы Приборная панель Отказ
После, перейдите к Приборная панель/URLS.PY (Создайте этот файл, если оно не существует) и добавьте список шаблонов URL, которые сопоставлены на функции просмотра:
from django.urls import path
from . import views
urlpatterns = [
path('', views.dashboard_with_pivot, name='dashboard_with_pivot'),
path('data', views.pivot_data, name='pivot_data'),
]Модель
И, наконец, мы достигли Моделирование данных Отказ Это моя любимая часть.
Как вы можете знать, модель данных – это концептуальное представление данных, хранящихся в базе данных.
Поскольку цель этого руководства состоит в том, чтобы показать, как создать интерактивную визуализацию данных внутри приложения, мы не будем беспокоиться о выборе базы данных. Мы будем использовать SQLite – Легкая база данных, которая отправляется с сервером веб-разработки Django.
Но имейте в виду, что эта база данных не является соответствующим выбором для разработки производства. С помощью Django ORM вы можете использовать другие базы данных, которые используют язык SQL, такие как PostgreSQL или MySQL.
Ради простоты наша модель будет состоять из одного класса. Вы можете создавать больше классов и определять отношения между ними, сложными или простыми.
Представьте, что мы проектируем Приборная панель для отдела продаж Отказ Итак, давайте создадим Заказать класс и определить его атрибуты в приборная панель/моделей .py :
from django.db import models
class Order(models.Model):
product_category = models.CharField(max_length=20)
payment_method = models.CharField(max_length=50)
shipping_cost = models.CharField(max_length=50)
unit_price = models.DecimalField(max_digits=5, decimal_places=2)Работа с базой данных
Теперь нам нужно создать базу данных и заполнить ее записями.
Но как мы можем перевести наш класс модели в таблицу базы данных?
Это где концепция Миграция приходит в удобное. Миграция это просто файл, который описывает, какие изменения должны быть применены к базе данных. Каждый раз, когда нам нужно создать базу данных на основе модели, описанной в классах Python, мы используем миграцию.
Данные могут прийти как объекты Python, словари или списки. На этот раз мы представляем объекты из базы данных с использованием классов Python, которые расположены в модели каталог.
Создайте миграцию для приложения с помощью одной команды:
Python Manage.py Makemigration Dashboard
Здесь мы уточняли, что приложение должно сказать Django, чтобы применить миграции для Приборная панель Модели приложения.
После создания файла миграции примените миграции, описанные в нем, и создайте базу данных:
Python Manage.py Миграция приборной панели
Если вы видите новый файл db.sqlite3 В каталоге проекта мы готовы работать с базой данных.
Давайте создадим экземпляры нашего класса заказов. Для этого мы будем использовать Shell Django – это похоже на Shell Python, но позволяет получать доступ к базе данных и создание новых записей.
Итак, начните раковину Django:
Python Manage.py Shell.
И напишите следующий код в интерактивной консоли:
from dashboard.models import Order >>> o1 = Order( ... product_category='Books', ... payment_method='Credit Card', ... shipping_cost=39, ... unit_price=59 ... ) >>> o1.save()
Точно так же вы можете создавать и сохранять столько объектов, сколько вам нужно.
Подключение данных к Flexmonster
И вот что я обещал объяснить.
Давайте выясним, как передавать данные из вашей модели в инструмент визуализации данных на переднем конце.
Сделать спину и Flexmonster общаться, мы можем следить за двумя разными подходами:
- Используя цикл запроса-ответа. Мы можем использовать Python и The Django Template Engine для записи кода JavaScript прямо в шаблоне.
- Использование async-запроса (Ajax) Это возвращает данные в JSON.
На мой взгляд, второй – самый удобный из-за ряда причин. Прежде всего, Flexmonster понимает JSON. Чтобы быть точным, он может принять массив объектов JSON в качестве входных данных. Еще одним преимуществом использования Async-запросов является лучшая скорость загрузки страницы и более ремонсионный код.
Посмотрим, как это работает.
Перейти к Шаблоны/Dashboard_pivot.html Отказ
Здесь мы создали два Div Контейнеры, где будут отображаться сетки и поворотные диаграммы.
В пределах вызова AJAX мы производим запрос на основе URL, содержащегося в Data-URL имущество. Затем мы сообщим запрос AJAX, которое мы ожидаем возврата объекта JSON (определено DataType ).
Как только запрос завершен, ответ JSON, возвращаемый нашим сервером, установлен на данные Параметр и таблица Pivot, заполненные этими данными.
Результат запроса (экземпляр jsonresponse ) возвращает строку, содержащую объект массива с дополнительной метательной информацией, поэтому мы должны добавить крошечную функцию для обработки данных на переднем конце. Он будет извлекать только те вложенные объекты, которые нам нужны и помещают их в один массив. Это потому, что Flexmonster принимает массив объектов JSON без вложенных уровней.
function processData(dataset) {
var result = []
dataset = JSON.parse(dataset);
dataset.forEach(item => result.push(item.fields));
return result;
}После обработки данных компонент принимает его в правильном формате и выполняет всю жесткую работу визуализации данных. Огромный плюс состоит в том, что нет необходимости группировать или агрегировать значения объектов вручную.
Вот как выглядит весь сценарий в шаблоне:
function processData(dataset) {
var result = []
dataset = JSON.parse(dataset);
dataset.forEach(item => result.push(item.fields));
return result;
}
$.ajax({
url: $("#pivot-table-container").attr("data-url"),
dataType: 'json',
success: function(data) {
new Flexmonster({
container: "#pivot-table-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 430,
toolbar: true,
report: {
dataSource: {
type: "json",
data: processData(data)
},
slice: {}
}
});
new Flexmonster({
container: "#pivot-chart-container",
componentFolder: "https://cdn.flexmonster.com/",
width: "100%",
height: 430,
//toolbar: true,
report: {
dataSource: {
type: "json",
data: processData(data)
},
slice: {},
"options": {
"viewType": "charts",
"chart": {
"type": "pie"
}
}
}
});
}
});Не забудьте приложить этот код JavaScript в