Міжелементна інтерактивність

Створення дашбордів з Dash і Plotly

Alex Scriven

Data Scientist

Що таке міжелементна?

Раніше: взаємодія з input змінює фігуру
Тепер: взаємодія з figure змінює іншу фігуру

Два варіанти:
- Наведення на фігуру
- Клік по точці даних

Властивість hoverData

# Create figure and layout
   dcc.Graph(id='bar_fig', 
             figure=ecom_bar),

   html.Br(),
   html.H2("The Hover Data:"),
   html.P(id='text_output')

# Set up a callback 
@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'hoverData'))

def capture_hover_data(hoverData):
    return str(hoverData)

Наше перше наведення

Що відбувається:

Користувач наводить: змінюється властивість hoverData фігури
Колбек передає це в тег .P()
Бачимо інформацію про точку

Гіф з горизонтальною стовпчиковою діаграмою загальних продажів (вісь x) проти Country (вісь y) з текстом «hover data» під нею, де нижче слово «none». Коли курсор наводять на нижній стовпчик для Australia, «none» змінюється на словник із деталями наведеної точки, зокрема міткою країни та значенням.

Обережно з відсутніми даними

Мета: використати 'country' у колбеку (відфільтрувати й згенерувати графік)
- У попередньому прикладі — в hoverData
Подивіться на цей розсіювальний графік (тип графіка й відповідні ID оновлено)
- Країни немає!

Гіф із розсіювальним графіком загальних продажів (вісь x) проти обсягу продажів (вісь y), де кожна точка — інша країна, з текстом «hover data» під нею та словом «none» нижче. Коли курсор наводять на точку для Australia, «none» змінюється на словник з деталями наведеної точки з двома значеннями, але без слова Australia.

Додаємо custom data

ecom_scatter = px.scatter(ecom_data, 
    x='Total Sales ($)', 
    y='Sales Volume', color='Country',
    custom_data=['Country'])

Тепер у customData є країна!

Гіф із розсіювальним графіком загальних продажів (вісь x) проти обсягу продажів (вісь y), де кожна точка — інша країна, з текстом «hover data» під нею та словом «none» нижче. Коли курсор наводять на точку для Australia, «none» змінюється на словник із деталями наведеної точки з двома значеннями, і цього разу у властивості customdata міститься слово Australia.

А як щодо кліку?

Колбек можна запускати і при кліку по точці
- Потрібна лише одна зміна (властивість clickData)

@callback(
    Output('text_output', 'children'),
    Input('bar_fig', 'clickData'))
def capture_hover_data(clickData):
    return str(clickData)

Зауважте: результат зʼявляється не одразу

Гіф з горизонтальною стовпчиковою діаграмою загальних продажів (вісь x) проти Country (вісь y) з текстом «hover data» під нею та словом «none» нижче. Коли курсор наводять на нижній стовпчик для Australia, текст не змінюється. Коли клацають по цьому стовпчику, «none» змінюється на словник із деталями точки, зокрема міткою країни та значенням.

Давайте потренуємось!

Створення дашбордів з Dash і Plotly