Python Academy · Урок

Основы информационных панелей

Объединяйте диаграммы в информационные панели

«Основы информационных панелей» — бесплатный урок Python Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Python Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Python Academy содержит 4 уроков всего.

От диаграмм к панелям мониторинга

Одна диаграмма отвечает на один вопрос. Панель мониторинга объединяет несколько связанных диаграмм, чтобы пользователь мог одним взглядом оценить ситуацию в целом.

Для её создания нужно решить, какие диаграммы следует объединить, как их разместить и как они связаны между собой.

Поддиаграммы в Plotly

Чтобы разместить несколько диаграмм Plotly в одном объекте диаграммы, используйте make_subplots(rows, cols) из plotly.subplots. Затем добавляйте каждый ряд данных в определённую ячейку с помощью fig.add_trace(trace, row=1, col=2).

Это аналог сетки поддиаграмм в Matplotlib.

Планирование сетки

До написания кода набросайте сетку. Решите, сколько в ней будет строк и столбцов и что разместить в каждой ячейке. Расчёты такие же, как для любой сетки.

panels = ['Revenue trend', 'Top products', 'Region map', 'Conversion %']
rows, cols = 2, 2
for i, p in enumerate(panels):
    r = i // cols + 1
    c = i % cols + 1
    print('row', r, 'col', c, '->', p)

Смешанные типы диаграмм

Панель мониторинга обычно объединяет разные типы диаграмм: линейную для тенденций, столбчатую для рейтингов и число для ключевого показателя. make_subplots может содержать их все, а тип каждой ячейки можно задать с помощью аргумента specs (например, для круговой диаграммы нужен type='domain').

Карточки KPI

Панели мониторинга часто начинаются с крупных отдельных чисел — KPI. Ряд Indicator в Plotly показывает значение, необязательное отклонение от цели и шкалу.

Отклонение — это просто разность между текущим и предыдущим значением.

current = 1280
previous = 1150
delta = current - previous
pct = delta / previous * 100
print('Value:', current)
print('Delta:', '+' + str(delta), '(' + format(pct, '.1f') + '%)')

Общие заголовки и макет

Задайте общий заголовок панели мониторинга с помощью fig.update_layout(title_text='Sales Dashboard'), а заголовки отдельных панелей — через аргумент subplot_titles функции make_subplots. Единообразный макет создаёт ощущение единого продукта.

Dash для веб-панелей мониторинга

Для интерактивных веб-панелей мониторинга с раскрывающимися списками и фильтрами стандартным решением является родственный Plotly фреймворк Dash. Он объединяет диаграммы Plotly с элементами управления HTML и обратными вызовами, которые обновляют диаграммы при изменении входных данных.

Для отчётов достаточно статической диаграммы с поддиаграммами, а Dash предназначен для работающих в реальном времени приложений.

Обратные вызовы: основная идея

Обратный вызов Dash сопоставляет входные данные (например, значение раскрывающегося списка) с выходными данными (например, диаграммой). Когда входные данные меняются, функция запускается заново и возвращает новый объект диаграммы. На входе — данные, на выходе — диаграмма.

def update_chart(selected_region):
    data = {'North': [1, 2, 3], 'South': [3, 2, 1]}
    series = data.get(selected_region, [])
    return {'region': selected_region, 'values': series}

print(update_chart('North'))
print(update_chart('South'))

Принципы макета

Хорошие панели мониторинга следуют иерархии:

Самые важные KPI находятся в левом верхнем углу, куда взгляд направляется в первую очередь
Ниже расположены вспомогательные диаграммы с подробностями
Используются единообразные цвета, чтобы один и тот же ряд данных везде означал одно и то же

Не перегружайте макет: свободное пространство помогает понимать информацию.

Внимание к производительности

Большое количество диаграмм и объёмные наборы данных могут замедлить панель мониторинга. Агрегируйте данные перед построением диаграмм, ограничивайте количество точек и пересчитывайте только те панели, входные данные которых изменились. Быстрыми панелями мониторинга пользуются, а медленные забрасывают.

Фильтры и перекрёстная фильтрация

Продвинутые панели мониторинга позволяют одному выбору одновременно обновлять несколько диаграмм — это называется перекрёстной фильтрацией. Щелчок по региону на карте отфильтровывает диаграммы тенденций и рейтингов, оставляя только этот регион.

В Dash это связывается с помощью обратных вызовов: выбранное значение становится входными данными, которые считывают все зависимые диаграммы.

Проверка знаний

Проверьте свои знания о панелях мониторинга.

Итоги

Вы узнали, как диаграммы превращаются в панели мониторинга:

make_subplots(rows, cols) + add_trace(..., row=, col=) для создания сетки
Сочетание разных типов диаграмм и карточки KPI на основе Indicator
Dash добавляет интерактивные элементы управления с помощью обратных вызовов, преобразующих входные данные в диаграмму
Соблюдение визуальной иерархии и контроль производительности

Часто задаваемые вопросы

Урок «Основы информационных панелей» бесплатный?

Да — полный текст урока «Основы информационных панелей» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Python Academy, подпишись на CoddyKit PRO. Курс Python Academy содержит 4 уроков всего.

Чему я научусь в уроке «Основы информационных панелей»?

Объединяйте диаграммы в информационные панели Ты практикуешь Python Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Python Academy?

Предыдущий опыт не требуется. Python Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Основы информационных панелей»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Python Academy?

Да. Каждый урок Python Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Python Academy