Эту связку полезно применять для быстрой визуализации одной таблицы с несколькими различными графиками, а также для создания надежного сайта на D jango и C hart.js.
Почему Pandas ? Все задачи можно выполнить изнутри Django непосредственно из БД, т. к. правильные запросы к базе всегда будут выгоднее для продакшена.
Почему Django? Это отличный выбор для проекта, где необходимо экспортировать данные в одну таблицу. Использование Flask будет более выигрышным вариантом, если не нужна аутентификация и доступ к данным из существующей базы.
Почему Chart.js? Если вы хотите развернуть кучу различных интерактивных диаграмм, изменив несколько переменных – Chart.js сделает это быстрее других.
Исходные тексты и простой набор данных из туториала вы найдете по ссылкам.
Все действия в этом проекте будут происходить на сервере с Debian.
Дополнительно можете установить себе palettable – цветовую палитру для Python, однако код будет работать и без нее.
На основе набора данных мы создадим следующую модель, но она должна быть изменена под ваши нужды.
Обязательно обновите БД после ее создания:
С помощью Pandas и Django сделайте загрузку csv в базу данных для Kaggle :
Импортируйте себе всю эту штуку:
Затем создайте пустой файл base/dashboard.html и data/urls.py:
Отредактируйте django_charts/urls.py, чтобы добавить URL для данных:
Обновите список django_charts/settings.py, чтобы включить data в INSTALLED_APPS:
Убедимся, что можем видеть покупку в админке, добавив это в data/admin.py:
Теперь вы можете перейти на страницу дашборда (127.0.0.1:8000/data/), а потом проверить в админке (127.0.0.1:8000/admin/data/purchase/), видны ли все записи. Если вы используете тот же набор данных, их должно быть около 1000.
Есть базовый файл, который мы будем расширять:
Немного модернизируем его:
Это даст возможность добавлять блоки с любой страницы. Обратите внимание, что здесь включен bootstrap CDN, чтобы использовать popper.js (это опционально). Можно выполнить проект совсем без bootstrap, но придется отредактировать dashboard.html.
Все написанные сценарии обернуты в $(document).ready , чтобы не происходило никаких манипуляций до тех пор, пока страница не будет готова.
Далее рассмотрим страницу с графиками – dashboard.html:
Здесь создается контейнер, строка и колонка, внутри которой лежит «колода карт», создающая карты одинакового размера.
Колода карт будет пытаться втиснуть все в одну строку. Счетчики forloop.counters используются для определения размера экрана и соответствующего обертывания колоды карт, однако на практике вы обнаружите, что Chart.js зачастую игнорирует настройки размера холста.
Чтобы лучше понять происходящее, посмотрим на views.py:
Будем использовать TemplateView. Это очень простое view, к которому можно что-то добавить. Единственный метод, который необходимо расширить – get_context_data, использующийся в Django для получения данных.
Мы вытаскиваем нужные объекты и создаем фрейм данных. Известно, что C hart.js не очень хорошо работает с датами – конвертируем их в строки после создания фрейма. Затем добавляем каждый график в контекст C hart. Это позволяет перебирать графики в коде HTML, т. к. каждая диаграмма представляет собой словарь, содержащий гипертекст и js-запись.
И наконец файл data/charts.py. Весь код легко переносится в другой проект, и вы можете просто поместить его в свой view. Пробежимся по некоторым функциям, а затем перейдем к классу Chart.
Эта функция принимает модель Django и возвращает все записи. Можно включить некоторые фильтры после всех аргументов имени. Например:
Результат будет ограничен городом Мандалай. Поля i nclude и exclude работают аналогично Django. Если вы ничего не включаете, будут выведены все поля из модели. Важно отметить, что exclude обрабатываются после i nclude. Таким образом, если включить и исключить столбец, он не будет отображаться.
Этот код устанавливает параметры по умолчанию для всех графиков.
Если вы не хотите утруждать себя маркировкой каждого из них, данная функция устанавливает случайный ID , используемый JS для изменения элемента HTML. Этот идентификатор также используется для именования функции JS и переменной, чтобы облегчить отладку.
get_colors применяется для установки начальных цветов. Если ее передать в палитру, она будет использоваться в качестве основной. Если ничего не передавать и не импортировать из palletable, то цвета будут генерироваться случайным образом.
get_random_colors используется, если цвета не были переданы или когда их больше, чем значений. Все начинается с переданных цветов, а в процессе они добавляются случайным образом.
По функциям все. Ниже приведен класс Chart.
Здесь использовался dataclass – это относительно недавнее дополнение Python и для быстрых классов оно будет хорошим выбором. Установка начальных значений помогает гарантировать, что вы не используете изменяемый объект для экземпляра.