Dash-Callback-Funktionen

Dash ermöglicht Entwicklern, mit Python dynamische, reaktionsfähige Benutzeroberflächen zu erstellen.

Eine der Kernfunktionen von Dash ist die Callback-Funktion, die es der Benutzeroberfläche ermöglicht, sich in Echtzeit basierend auf Benutzereingaben oder Aktionen zu aktualisieren.

Callback-Funktionen sind der zentrale Mechanismus in Dash zur Behandlung von Benutzerinteraktionen. Sie ermöglichen es, das Layout oder die Daten der Anwendung dynamisch zu aktualisieren, wenn der Benutzer mit der Anwendung interagiert. Einfach ausgedrückt ist eine Callback-Funktion eine Python-Funktion, die ausgelöst wird, wenn sich bestimmte Eingaben ändern, und die Ausgaben basierend auf Änderungen dieser Eingaben aktualisiert.

Eine typische Dash-Callback-Funktion besteht aus den folgenden Teilen:

  1. Input: Gibt an, welche Änderungen an Komponenteneigenschaften die Callback-Funktion auslösen.
  2. Output: Gibt an, welche Komponenteneigenschaften nach Ausführung der Callback-Funktion aktualisiert werden.
  3. State: Optionaler Parameter, der verwendet wird, um Daten zu übergeben, die den Callback nicht auslösen, aber innerhalb des Callbacks verwendet werden müssen.
  4. Callback-Funktionskörper: Enthält den eigentlichen Logikcode, der zur Verarbeitung von Eingaben und Erzeugung von Ausgaben dient.

Grundstruktur von Callback-Funktionen

@app.callback(
    Output(component_id='output-component', component_property='output-property'),
    Input(component_id='input-component', component_property='input-property')
)
def update_output(input_value):
    # 根据输入值计算输出值
    return output_value

  1. Output：

    • Gibt das Ausgabeziel der Callback-Funktion an.

    • component_id: Die ID der Zielkomponente.

    • component_property: Die Eigenschaft der Zielkomponente (z. B.children、valueusw.).

  2. Input：

    • Gibt die Eingabequelle der Callback-Funktion an.

    • component_id: Die ID der Eingabekomponente.

    • component_property: Die Eigenschaft der Eingabekomponente (z. B.value、n_clicksusw.).

  3. Callback-Funktion：

    • Empfängt Eingabewerte, berechnet und gibt Ausgabewerte zurück.

    • Der Funktionsname kann angepasst werden (z. B.update_output）。

Beispiel

Das folgende Beispiel zeigt, wie der Textinhalt basierend auf dem Wert eines Eingabefelds dynamisch aktualisiert wird:

Beispiel

from dash import Dash, html, dcc, Eingabe, Ausgabe

# Dash-App erstellen
app = Dash(__name__)

# Layout definieren
app.layout = html.Div([
    dcc.Input(id='input', type='text', placeholder='Bitte Inhalt eingeben...'),
    html.Div(id='output')
])

# Die Callback-Funktion definieren
@app.callback(
    Output('output', 'children'),
    Input('input', 'value')
)
def update_output(input_value):
    return f'You entered: {input_value}'

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Das folgende Beispiel zeigt, wie ein Diagramm basierend auf der Auswahl in einem Dropdown-Menü dynamisch aktualisiert wird:

Beispiel

from dash import Dash, html, dcc, Eingabe, Ausgabe
import plotly.express as px
import pandas as pd

# Dash-App erstellen
app = Dash(__name__)

# Beispieldaten
df = pd.DataFrame({
    'city': ['Beijing', 'Shanghai', 'Guangzhou', 'Shenzhen'],
    'Bevölkerung': [2171, 2424, 1490, 1303]
})

# Layout definieren
app.layout = html.Div([
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': city, 'value': city} for city in df['city']],
        value='Beijing'  # Standardwert
    ),
    dcc.Graph(id='graph')
])

# Die Callback-Funktion definieren
@app.callback(
    Output('graph', 'figure'),
    Input('dropdown', 'value')
)
def update_graph(selected_city):
    filtered_df = df[df['city'] == selected_city]
    fig = px.bar(filtered_df, x='city', y='Population', title=f'{selected_city} Bevölkerungsdaten')
    return fig

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)

Nachdem der obige Code ausgeführt wurde, wird das Diagramm dynamisch aktualisiert, wenn Sie eine Stadt im Dropdown-Menü auswählen, um die Bevölkerungsdaten für diese Stadt anzuzeigen.

Im folgenden Beispiel wird, nachdem der Benutzer eine Zahl eingegeben hat, das Quadrat dieser Zahl angezeigt:

Beispiel

from dash import Dash, html, dcc, Eingabe, Ausgabe

# Dash-App erstellen
app = Dash(__name__)

# Layout definieren
app.layout = html.Div([
    html.H1("Quadrat berechnen"),  # Überschrift
    dcc.Input(
        id='number-input',  # ID des Eingabefelds
        type='number',  # Eingabetyp ist Zahl
        placeholder='Bitte geben Sie eine Zahl ein...',  # Platzhaltertext des Eingabefelds
        value=''  # Anfangswert ist leer
    ),
    html.Div(id='output')  # Div zur Anzeige der Ergebnisse
])

# Die Callback-Funktion definieren
@app.callback(
    Output('output', 'children'),  # Ausgabe an die children-Eigenschaft des Div mit der ID 'output'
    Input('number-input', 'value')  # Die Eingabe stammt aus dem value-Attribut des Eingabeelements mit der ID 'number-input'
)
def calculate_square(number):
    if number is None or number == '':  # Wenn die Eingabe leer ist
        return 'Bitte geben Sie eine Zahl ein.'
    try:
        number = float(number)  # Eingabe in float umwandeln
        square = number ** 2  # Quadrat berechnen
        return f'Das Quadrat von {number} ist: {square}'  # Ergebnis zurückgeben
    except ValueError:  # Wenn die Eingabe keine Zahl ist
        return 'Bitte geben Sie eine gültige Zahl ein.'

# Die App ausführen
if __name__ == '__main__':
    app.run_server(debug=True)  # Startet die App, debug=True aktiviert den Debug-Modus

Code-Erklärung:

1. Layout-Abschnitt：

  • Nutzunghtml.H1Erstelle eine Überschrift "Quadrat berechnen".

  • Nutzungdcc.InputErstelle ein numerisches Eingabefeld,idistnumber-input, der Typ istnumber。

  • Nutzunghtml.DivErstellen Sie einen Bereich zur Anzeige der Ergebnisse,idistoutput。

2. Callback-Funktion：

  • Nutzung@app.callbackDer Decorator definiert die Callback-Funktion.

  • Eingabe istnumber-inputdes EingabefeldsvalueEigenschaft.

  • Ausgabe istoutputDiv'schildrenEigenschaft.

  • In der Callback-Funktion:

    • Prüfen Sie, ob die Eingabe leer ist.

    • Wandeln Sie die Eingabe in einen Float um und berechnen Sie das Quadrat.

    • Geben Sie das formatierte Ergebnis zurück.

3. Anwendung ausführen: Verwenden Sieapp.run_server(debug=True)Starten Sie die App,debug=TrueZeigt an, dass der Debug-Modus aktiviert ist. Das Ausführungsergebnis wird wie folgt angezeigt:

Wie Callback-Funktionen funktionieren

1. Eingaben und Ausgaben binden

In Dash werden die Eingaben und Ausgaben einer Callback-Funktion angegeben durchInputundOutputDurch das Objekt angegeben.InputDas Objekt gibt an, welche Änderungen von Komponenteneigenschaften die Callback-Funktion auslösen, währendOutputDas Objekt gibt an, welche Eigenschaften welcher Komponenten aktualisiert werden, nachdem die Callback-Funktion ausgeführt wurde.

2. Auslösen von Callback-Funktionen

Wenn der Benutzer eine Aktion auf der Oberfläche ausführt (z. B. Text eingeben, auf eine Schaltfläche klicken usw.), ändern sich die relevanten Komponenteneigenschaften. Dash erkennt diese Änderungen und ruft automatisch die daran gebundene Callback-Funktion auf.

3. Ausführung von Callback-Funktionen

Wenn die Callback-Funktion ausgeführt wird, übergibt Dash die aktuellen Werte der Eingabeeigenschaften als Parameter an die Callback-Funktion. Die Callback-Funktion führt Berechnungen oder Verarbeitungen basierend auf diesen Eingabewerten durch und gibt neue Werte für die Ausgabeeigenschaften zurück. Dash aktualisiert die zurückgegebenen Werte automatisch in den angegebenen Komponenteneigenschaften.

Erweiterte Verwendung von Callback-Funktionen

1. Mehrere Eingaben und Ausgaben

Eine Callback-Funktion kann mehrere Eingaben und Ausgaben haben. Zum Beispiel:

Beispiel

@app.callback(
    [Output('output-div-1', 'children'),
     Output('output-div-2', 'children')],
    [Input('input-1', 'value'),
     Input('input-2', 'value')]
)
def update_outputs(input1, input2):
    return f'Input 1: {input1}', f'Input 2: {input2}'

In diesem Beispiel hat die Callback-Funktionupdate_outputszwei Eingaben und zwei Ausgaben. Wenninput-1oderinput-2Wenn sich der Wert von ... ändert, wird die Callback-Funktion ausgelöst, und sie aktualisiert die ... der beiden Ausgabekomponenten.childrenEigenschaft.

2. State verwenden

Manchmal müssen Sie Daten in einem Callback verwenden, die den Callback nicht auslösen. In diesem Fall können SieStateObjekt.StateObjekt undInputÄhnlich wie das Objekt, aber es löst die Callback-Funktion nicht aus.

Beispiel

@app.callback(
    Output('output-div', 'children'),
    [Input('submit-button', 'n_clicks')],
    [State('input-text', 'value')]
)
def update_output(n_clicks, input_value):
    if n_clicks is None:
        return 'Noch keine Klicks'
    return f'Button wurde {n_clicks} Mal geklickt. Eingabe: {input_value}'

In diesem Beispiel,n_clicksist die Eingabe, die den Callback auslöst, währendinput_valueEs ist der Zustand, der in der Callback-Funktion verwendet wird. Die Callback-Funktion wird nur ausgelöst, wenn auf die Schaltfläche geklickt wird, aber der aktuelle Wert des Eingabefelds kann innerhalb des Callbacks verwendet werden.

3. Vermeidung der doppelten Ausführung von Callback-Funktionen

In einigen Fällen können Callback-Funktionen häufig ausgelöst werden, was zu Leistungsproblemen führt. Um dies zu vermeiden, können Siedash.no_updateverwenden, um unnötige Aktualisierungen zu verhindern.

Beispiel

@app.callback(
    Output('output-div', 'children'),
    [Input('input-text', 'value')]
)
def update_output(input_value):
    if not input_value:
        return dash.no_update
    return f'Sie haben eingegeben: {input_value}'

In diesem Beispiel wird die Callback-Funktion die Ausgabekomponente nicht aktualisieren, wenn der Wert des Eingabefelds leer ist.

Häufige Probleme und Lösungen

1. Callback-Funktion wird nicht ausgelöst

Wenn die Callback-Funktion nicht wie erwartet ausgelöst wird, kann dies einen der folgenden Gründe haben:

  • Nichtübereinstimmung der Eingabe- oder Ausgabe-ID: Stellen Sie sicherInputundOutputDie Komponenten-IDs in stimmen mit den IDs im Layout überein.
  • Attributnamenfehler: Stellen Sie sicherInputundOutputStellen Sie sicher, dass die Eigenschaftsnamen in ... korrekt sind.
  • Callback-Funktion nicht registriert: Stellen Sie sicher, dass die Callback-Funktion in der Anwendung korrekt registriert ist.

2. Langsame Ausführung der Callback-Funktion

Wenn die Callback-Funktion langsam ausgeführt wird, sollten Sie die folgenden Optimierungsmethoden berücksichtigen:

  • Reduzieren Sie den Rechenaufwand der Callback-Funktion: Versuchen Sie, komplexe Berechnungen in der Callback-Funktion zu vermeiden.
  • Cache verwenden: Bei wiederholten Berechnungsergebnissen kann Caching verwendet werden, um die Berechnungszeit zu reduzieren.
  • Asynchroner Callback: Für lang andauernde Aufgaben können asynchrone Callbacks verwendet werden, um das Blockieren des Hauptthreads zu vermeiden.
Weitere Erweiterungen