Graphique à mise à jour dynamique Dash

Dans les applications modernes de visualisation de données, la mise à jour dynamique des graphiques est une fonctionnalité très importante qui permet aux utilisateurs de voir les changements de données en temps réel sans actualiser toute la page.

Dans Dash, le mécanisme central pour la mise à jour dynamique des graphiques estFonction de rappel, les fonctions de rappel vous permettent de mettre à jour dynamiquement le contenu des graphiques lorsque les utilisateurs interagissent avec la page (comme cliquer sur des boutons, sélectionner des menus déroulants, etc.).

Structure de base d'une fonction de rappel

Une fonction de rappel typique se compose des parties suivantes :

  1. Entrée: Définit le composant et ses propriétés qui déclenchent le rappel.
  2. Sortie: Définit les composants et leurs propriétés qui doivent être mis à jour.
  3. Corps de la fonction de rappel: Calcule et renvoie les valeurs de sortie en fonction des valeurs d'entrée.

Pour une explication détaillée des fonctions de rappel Dash, voir :https://www.example.com/dash/dash-callback.html。

Graphique simple de mise à jour dynamique

Grâce aux fonctions de rappel, les données et la mise en page du graphique peuvent être mises à jour dynamiquement.

Voici un exemple complet d'application Dash, où les utilisateurs peuvent sélectionner un jeu de données via un menu déroulant pour afficher dynamiquement le graphique en courbes correspondant :

Exemple

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

# Créer l'application Dash
app = Dash(__name__)

# Définir un jeu de données d'exemple
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]
    })
}

# Définir la mise en page
app.layout = html.Div([
    html.H1("Exemple de graphique en courbes dynamique"),  # Titre
    dcc.Dropdown(
        id='dataset-dropdown',  # ID de la liste déroulante
        options=[{'label': name, 'value': name} for name in datasets.keys()],  # Options du menu déroulant
        value='Dataset 1'  # Jeu de données sélectionné par défaut
    ),
    dcc.Graph(id='line-chart')  # Composant Graph pour afficher des graphiques en courbes
])

# Définir la fonction de rappel
@app.callback(
    Output('line-chart', 'figure'),  # Sortie vers l'attribut figure du composant Graph avec l'id 'line-chart'
    Input('dataset-dropdown', 'value')  # L'entrée provient de l'id 'dataset-dropdown' du menu déroulant de la propriété value
)
def update_line_chart(selected_dataset):
    # Obtenir le jeu de données sélectionné
    df = datasets[selected_dataset]
    # Créer un graphique en courbes avec Plotly Express
    fig = px.line(df, x='x', y='y', title=f'{selected_dataset} Graphique en courbes')
    return fig

# Exécuter l'application
if __name__ == '__main__':
    app.run_server(debug=True)  # Démarrer l'application, debug=True active le mode débogage

Affiché comme indiqué ci-dessous :

Explication du code

1. Section de mise en page：

  • Utilisationhtml.H1Créez un titre "Calculer le carré".

  • Utilisationdcc.InputCréez une zone de saisie numérique,idestnumber-input, le type estnumber。

  • Utilisationhtml.DivCréez une zone pour afficher les résultats,idestoutput。

2. Fonction de rappel：

  • Utilisation@app.callbackLe décorateur définit la fonction de rappel.

  • l'entrée estnumber-inputdu champ de saisievaluePropriété.

  • la sortie estoutputde la DivchildrenPropriété.

  • Dans la fonction de rappel :

    • Vérifiez si l'entrée est vide.

    • Convertissez l'entrée en nombre à virgule flottante et calculez son carré.

    • Retournez le résultat formaté.

4. Exécuter l'application：

  • Utilisationapp.run_server(debug=True)Lancez l'application,debug=TrueIndique que le mode débogage est activé.

autres extensions