Собесов

Сценарий: интерактивный график plotly для дашборда

PythonVisualizationСредняяMiddle

Условие

В Streamlit-дашборд нужен интерактивный график выручки по дням с разбивкой по сегментам, hover-подсказками и переключателем «накопленная / по дням».

Решение

plotly.express

import plotly.express as px
 
fig = px.area(
    df,
    x='date', y='revenue',
    color='segment',
    line_group='segment',
    hover_data={'revenue': ':,.0f', 'date': '|%d %b %Y'},
    labels={'revenue': 'Выручка, ₽', 'date': 'День', 'segment': 'Сегмент'},
    title='Выручка по сегментам',
)
fig.update_layout(
    hovermode='x unified',          # один тултип на дату со всеми сегментами
    legend_title='Сегмент',
    template='plotly_white',
)

Переключатель «накопленная / по дням»

Через updatemenus:

import plotly.graph_objects as go
 
cum = df.groupby('segment', as_index=False).apply(
    lambda d: d.assign(cum=d.sort_values('date')['revenue'].cumsum())
).reset_index(drop=True)
 
fig = go.Figure()
for seg in df['segment'].unique():
    sub = df[df['segment'] == seg]
    sub_c = cum[cum['segment'] == seg]
    fig.add_trace(go.Scatter(x=sub['date'], y=sub['revenue'], name=f'{seg} daily', visible=True))
    fig.add_trace(go.Scatter(x=sub_c['date'], y=sub_c['cum'], name=f'{seg} cum', visible=False))
 
n = df['segment'].nunique()
fig.update_layout(updatemenus=[{
    'buttons': [
        {'label': 'Daily', 'method': 'update',
         'args': [{'visible': [True, False] * n}]},
        {'label': 'Cumulative', 'method': 'update',
         'args': [{'visible': [False, True] * n}]},
    ],
    'direction': 'down', 'x': 1.0, 'y': 1.15,
}])

В Streamlit

import streamlit as st
st.plotly_chart(fig, use_container_width=True)

Подводные камни

  1. На больших данных (>100k точек) plotly тормозит — агрегируйте предварительно или используйте scattergl.
  2. Hover-формат через hover_data={'col': ':,.0f'} — двоеточие критично; без него игнорируется.
  3. Заголовки осей по умолчанию — имя колонки (revenue), для отчёта переименовывать через labels=.
  4. template='plotly_white' — спокойный фон для отчётов; plotly_dark — для тёмной темы дашборда.
  5. Экспорт в PNG требует kaleido (pip install kaleido).

Эталонный ответ

px.area с color=segment, hover_data для форматов, hovermode='x unified' для общих тултипов; переключатели через updatemenus или Streamlit toggle.

Хочешь увидеть разбор?

Зарегистрируйся бесплатно — откроется развёрнутое решение этой задачи и ещё 4 на выбор.

Зарегистрироваться и увидеть разбор
Уже есть аккаунт? Войти