Dash: динамическое обновление диаграммы

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

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

Базовая структура функции обратного вызова

Типичная функция обратного вызова состоит из следующих частей:

  1. Input: Определяет компонент и его свойства, которые запускают обратный вызов.
  2. Output: Определяет компоненты и их свойства, которые необходимо обновить.
  3. Тело функции обратного вызова: Вычисляет и возвращает выходные значения на основе входных значений.

Подробное объяснение функций обратного вызова Dash см. по ссылке:https://www.example.com/dash/dash-callback.html。

Простое динамическое обновление графика

С помощью функций обратного вызова можно динамически обновлять данные и макет графика.

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

Пример

from dash import Dash, html, dcc, Ввод, Вывод
import plotly.express as px
import pandas as pd

# Создать приложение Dash
app = Dash(__name__)

# Определить пример набора данных
datasets = {
    'Dataset 1': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [10, 15, 13, 17, 21]
    }),
    'Dataset 2': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [5, 10, 8, 12, 15]
    }),
    'Dataset 3': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [20, 18, 22, 19, 25]
    })
}

# Определить макет
app.layout = html.Div([
    html.H1("Пример динамического линейного графика"),  # Заголовок
    dcc.Dropdown(
        id='dataset-dropdown',  # ID выпадающего списка
        options=[{'label': name, 'value': name} for name in datasets.keys()],  # Опции выпадающего меню
        value='Dataset 1'  # Набор данных, выбранный по умолчанию
    ),
    dcc.Graph(id='line-chart')  # Компонент Graph для отображения линейных графиков
])

# Определить функцию обратного вызова
@app.callback(
    Output('line-chart', 'figure'),  # Вывод в атрибут figure компонента Graph с id 'line-chart'
    Input('dataset-dropdown', 'value')  # Ввод поступает от id 'dataset-dropdown' выпадающего меню свойства value
)
def update_line_chart(selected_dataset):
    # Получить выбранный набор данных
    df = datasets[selected_dataset]
    # Создание линейного графика с помощью Plotly Express
    fig = px.line(df, x='x', y='y', title=f'{selected_dataset} Линейный график')
    return fig

# Запустить приложение
if __name__ == '__main__':
    app.run_server(debug=True)  # Запускает приложение, debug=True включает режим отладки

Отображается, как показано ниже:

Пояснение кода

1. Раздел макета：

  • Использованиеhtml.H1Создайте заголовок "Вычислить квадрат".

  • Использованиеdcc.InputСоздайте поле ввода числа,idявляетсяnumber-input, тип —number。

  • Использованиеhtml.DivСоздайте область для отображения результатов,idявляетсяoutput。

2. Функция обратного вызова：

  • Использование@app.callbackДекоратор определяет функцию обратного вызова.

  • входные данные —number-inputполя вводаvalueСвойство.

  • выходные данные —outputDivchildrenСвойство.

  • В функции обратного вызова:

    • Проверьте, пусты ли входные данные.

    • Преобразуйте входное значение в число с плавающей запятой и вычислите его квадрат.

    • Верните отформатированный результат.

4. Запустите приложение：

  • Использованиеapp.run_server(debug=True)Запустите приложение,debug=TrueУказывает, что режим отладки включён.

Другие расширения