Взаимодействие между элементами

Создание дашбордов с помощью Dash и Plotly

Alex Scriven

Data Scientist

Что такое взаимодействие между элементами?

Ранее: взаимодействие с элементом ввода изменяло график
Теперь: взаимодействие с графиком изменяет другой график

Два варианта использования:
- Наведение курсора на график
- Клик по точке данных

Свойство 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) и странами (ось Y). Под ней текст «hover data» со значением «none». При наведении курсора на нижнюю полосу (Австралия) значение «none» меняется на словарь с данными точки: название страны и значение.

Осторожно: недостающие данные

Цель: использовать «country» в колбэке (фильтровать и перестраивать график)
- В предыдущем примере — в hoverData
Рассмотрим эту точечную диаграмму (обновлён тип графика и ID)
- Страны нет!

Анимация: точечная диаграмма с общими продажами (ось X) и объёмом продаж (ось Y), точки окрашены по странам. Под ней текст «hover data» со значением «none». При наведении на точку (Австралия) значение меняется на словарь с двумя показателями, но без названия страны.

Добавление пользовательских данных

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

Теперь customData содержит страну!

Анимация: точечная диаграмма с общими продажами (ось X) и объёмом продаж (ось Y), точки окрашены по странам. Под ней текст «hover data» со значением «none». При наведении на точку (Австралия) значение меняется на словарь, в котором свойство customdata содержит название страны.

А что насчёт клика?

Колбэк можно также вызывать по клику на точку
- Достаточно одного изменения (свойство clickData)

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

Обратите внимание: данные появляются не сразу

Анимация: горизонтальная столбчатая диаграмма с общими продажами (ось X) и странами (ось Y). Под ней текст «hover data» со значением «none». При наведении курсора на нижнюю полосу (Австралия) значение не меняется. При клике на полосу значение «None» меняется на словарь с данными точки: название страны и значение.

Давайте потренируемся!

Создание дашбордов с помощью Dash и Plotly