So verwenden Sie Plotly und Dash zur Datenvisualisierung

Wuhan Yuan Chuanghui kehrt zurück, sprechen wir am 20. April über große Models.“

Dieser Artikel stammt aus der Huawei Cloud Community „ From Data to Deployment Using Plotly and Dash to Realize Data Visualization and Production Environment Deployment “ von Lemony Hug.

Die Datenvisualisierung ist ein wichtiger Bestandteil der Datenanalyse, der uns helfen kann, Daten intuitiver zu verstehen und verborgene Muster und Trends zu entdecken. Es gibt viele leistungsstarke Tools zur Datenvisualisierung in Python, wobei Plotly und Dash zwei beliebte Optionen sind. Plotly bietet eine Vielzahl interaktiver Zeichenfunktionen, während Dash ein Python-Framework zum Erstellen interaktiver Webanwendungen ist. In diesem Artikel wird die Verwendung von Plotly und Dash zur Datenvisualisierung vorgestellt und die Anwendung anhand von Fallcode demonstriert.

Installieren Sie Plotly und Dash

Zuerst müssen wir die Plotly- und Dash-Bibliotheken installieren. Sie können sie mit pip mit dem folgenden Befehl installieren:

pip install plotly dash

Sobald die Installation abgeschlossen ist, können wir mit der Verwendung dieser beiden Bibliotheken beginnen.

Fallcode: einfache Datenvisualisierungsanwendung

Beginnen wir mit einem einfachen Beispiel: Nehmen wir an, wir haben einige CSV-Dateien mit Verkaufsdaten und möchten ein interaktives Diagramm erstellen, um diese Daten zu visualisieren und als Webanwendung bereitzustellen. Zuerst müssen wir die notwendigen Bibliotheken importieren:

Bindestrich importieren
Von Dash Import DCC, HTML
plotly.express als px importieren
Pandas als PD importieren

#Daten lesen
df = pd.read_csv('sales_data.csv')

#Dash-Anwendung erstellen
app = dash.Dash(__name__)

# Layout
app.layout = html.Div([
    html.H1("Verkaufsdatenvisualisierung"),
    dcc.Graph(
        id='sales-graph'
    )
])

# Ruf zurück
@app.callback(
    dash.dependencies.Output('sales-graph', 'figure'),
    [dash.dependencies.Input('sales-graph', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['Year'] == selected_year]
    fig = px.bar(filtered_df, x='Month', y='Sales', title=f'Sales data-{selected_year}')
    zurück Abb

# Anwendung starten
if __name__ == '__main__':
    app.run_server(debug=True)

In diesem Beispiel lesen wir zunächst eine CSV-Datei mit dem Namen sales_data.csv und erstellen dann eine Dash-Anwendung. Im Layout der Anwendung definieren wir einen Titel und einen leeren Diagrammbereich. Anschließend richten wir eine Rückruffunktion ein, sodass das Diagramm aktualisiert wird, um die Verkaufsdaten für dieses Jahr anzuzeigen, wenn der Benutzer ein anderes Jahr auswählt. Abschließend starten wir die Anwendung durch den Aufruf der run_server-Methode.

Stellen Sie sicher, dass Ihre sales_data.csv-Datei die erforderlichen Datenfelder (z. B. Jahr, Monat und Umsatz) enthält, damit der Code ordnungsgemäß ausgeführt werden kann.

Fallbeispiel: Erweiterte Datenvisualisierung und Interaktion

Im vorherigen Fall haben wir gezeigt, wie man mit Dash und Plotly eine einfache Datenvisualisierungsanwendung erstellt. Lassen Sie uns nun einige erweiterte Funktionen genauer untersuchen, z. B. das Hinzufügen von mehr Interaktivität und Anpassung.

Nehmen wir an, wir möchten Trends in Verkaufsdaten anzeigen und Benutzern ermöglichen, verschiedene Trends zu erkennen, indem sie verschiedene Produktkategorien auswählen. Wir können diese Funktion durch den folgenden Code erreichen:

Bindestrich importieren
Von Dash Import DCC, HTML
plotly.express als px importieren
Pandas als PD importieren

#Daten lesen
df = pd.read_csv('sales_data.csv')

#Dash-Anwendung erstellen
app = dash.Dash(__name__)

# Layout
app.layout = html.Div([
    html.H1("Verkaufsdatentrend"),
    dcc.Dropdown(
        id='product-dropdown',
        Optionen=[
            {'label': 'Produkt A', 'value': 'Produkt A'},
            {'label': 'Produkt B', 'value': 'Produkt B'},
            {'label': 'Produkt C', 'value': 'Produkt C'}
        ],
        value='Produkt A'
    ),
    dcc.Graph(
        id='sales-trend'
    )
])

# Ruf zurück
@app.callback(
    dash.dependencies.Output('sales-trend', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend(selected_product):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}Sales Trend')
    zurück Abb

# Anwendung starten
if __name__ == '__main__':
    app.run_server(debug=True)

In diesem Beispiel haben wir ein Dropdown-Menü hinzugefügt, das es dem Benutzer ermöglicht, verschiedene Produktkategorien auszuwählen. Wenn der Benutzer ein anderes Produkt auswählt, wird das Diagramm aktualisiert, um Verkaufstrends für das ausgewählte Produkt anzuzeigen. Dies gibt Benutzern mehr Flexibilität, den Verkauf verschiedener Produkte zu erkunden.

Zusätzlich zu einfachen Liniendiagrammen bietet Plotly auch eine Fülle von Diagrammtypen und Anpassungsoptionen, um komplexere Visualisierungsanforderungen zu erfüllen. Mit Dash können wir interaktive Webanwendungen erstellen und Diagramme über Rückruffunktionen dynamisch aktualisieren, um Benutzern ein besseres Erlebnis zu bieten.

Fügen Sie Interaktivität und Styling hinzu

Im obigen Fall haben wir gezeigt, wie man mit Dash und Plotly eine Datenvisualisierungsanwendung erstellt und grundlegende interaktive Funktionen bereitstellt. Fügen wir nun weitere Interaktivität und Gestaltung hinzu, um unsere App attraktiver und benutzerfreundlicher zu machen.

Bindestrich importieren
aus dem Dash dcc, html, callback_context importieren
plotly.express als px importieren
Pandas als PD importieren

#Daten lesen
df = pd.read_csv('sales_data.csv')

# Erhalten Sie eine einzigartige Produktliste
available_products = df['Product'].unique()

#Dash-Anwendung erstellen
app = dash.Dash(__name__)

#Stil anwenden
app.layout = html.Div([
    html.H1("Sales Data Trend", style={'textAlign': 'center'}),
    html.Div([
        html.Label("Produkt auswählen:"),
        dcc.Dropdown(
            id='product-dropdown',
            Optionen=[{'label': Produkt, 'Wert': Produkt} für Produkt in verfügbare_Produkte],
            value=available_products[0]
        )
    ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
    dcc.Graph(
        id='sales-trend',
        config={'displayModeBar': False} # Deaktiviert die Modusleiste des Diagramms
    )
], style={'padding': '20px'})

# Ruf zurück
@app.callback(
    dash.dependencies.Output('sales-trend', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend(selected_product):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}Sales Trend')
    zurück Abb

# Anwendung starten
if __name__ == '__main__':
    app.run_server(debug=True)

In diesem Beispiel haben wir einige Stile hinzugefügt, um die App attraktiver aussehen zu lassen. Wir haben den Titel zentriert und etwas Leerraum um das Produkt-Dropdown-Menü herum hinzugefügt, um die Ästhetik des Layouts zu verbessern. Darüber hinaus haben wir die Modusleiste des Diagramms deaktiviert, um die Benutzeroberfläche zu vereinfachen.

Mit diesen Verbesserungen bietet unsere App nun nicht nur leistungsstarke interaktive Datenvisualisierungsfunktionen, sondern verfügt auch über ein besseres Erscheinungsbild und Benutzererlebnis. Dadurch wird die Bereitschaft der Benutzer erhöht, unsere Apps zum Erkunden von Daten zu nutzen und daraus wertvolle Erkenntnisse zu gewinnen.

Bereitstellung in der Produktionsumgebung

Nach Abschluss der Entwicklung einer Datenvisualisierungsanwendung möchten wir die Anwendung normalerweise in einer Produktionsumgebung bereitstellen, damit andere Benutzer darauf zugreifen und sie verwenden können. In diesem Abschnitt besprechen wir, wie wir unsere Dash-Anwendung auf einem Produktionsserver bereitstellen.

Mit Gunicorn und Nginx

Gunicorn ist ein Python-WSGI-HTTP-Server (HTTP-Server), der HTTP-Anfragen von Webanwendungen verarbeiten kann. Nginx ist ein leistungsstarker HTTP- und Reverse-Proxy-Server, der normalerweise zur Verarbeitung statischer Dateien und zum Lastausgleich verwendet wird.

Zuerst müssen wir Gunicorn und Nginx installieren:

Pip Gunicorn installieren
sudo apt-get install nginx

Als nächstes verwenden wir Gunicorn, um unsere Dash-Anwendung auszuführen:

gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

Dadurch wird der Gunicorn-Server lokal gestartet und die Dash-Anwendung auf Port 8050 ausgeführt. Als nächstes müssen wir Nginx als Reverse-Proxy konfigurieren, um HTTP-Anfragen an den Gunicorn-Server weiterzuleiten.

Konfigurieren Sie Nginx

Fügen Sie der Konfigurationsdatei von Nginx den folgenden Inhalt hinzu:

Server {
    Hören Sie 80;
    Servername Ihre_Domain.com;

    Standort / {
        Proxy_Pass http://127.0.0.1:8050;
        Proxy_Redirect aus;
        Proxy_set_header Host $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Ersetzen Sie your_domain.com durch Ihren Domainnamen. Laden Sie dann die Nginx-Konfiguration neu:

sudo systemctl nginx neu laden

Jetzt wurde Ihre Dash-Anwendung erfolgreich in der Produktionsumgebung bereitgestellt und kann über Ihren Domänennamen aufgerufen werden.

Verwenden Sie HTTPS

Um die Sicherheit zu verbessern, können wir Nginx auch für die Verwendung des HTTPS-Protokolls konfigurieren. Sie müssen ein SSL-Zertifikat erhalten und es in Nginx konfigurieren. Eine einfache Möglichkeit besteht darin, Let's Encrypt zu nutzen, um ein kostenloses SSL-Zertifikat zu erhalten. Hier ist ein einfaches Konfigurationsbeispiel:

Server {
    Hören Sie 80;
    Servername Ihre_Domain.com;

    Standort / {
        return 301 https://$host$request_uri;
    }
}

Server {
    Hören Sie 443 SSL;
    Servername Ihre_Domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    Standort / {
        Proxy_Pass http://127.0.0.1:8050;
        Proxy_Redirect aus;
        Proxy_set_header Host $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Sobald Ihre Dash-Anwendung auf diese Weise konfiguriert ist, wird sie über das HTTPS-Protokoll bereitgestellt und alle HTTP-Anfragen werden an HTTPS umgeleitet.

Integrierte Benutzerauthentifizierung und Rechteverwaltung

In manchen Fällen möchten Sie möglicherweise den Zugriff auf eine Datenvisualisierungsanwendung auf bestimmte Benutzer oder Benutzergruppen beschränken. Um dies zu erreichen, können wir Benutzerauthentifizierungs- und Rechteverwaltungssysteme integrieren.

Verwenden Sie die Basisauthentifizierung

Eine einfache Methode ist die Verwendung der Standardauthentifizierung. Sie können die Basisauthentifizierung in Nginx so konfigurieren, dass Benutzer vor dem Zugriff auf die Anwendung einen Benutzernamen und ein Kennwort angeben müssen. Das Folgende ist eine Beispiel-Nginx-Konfiguration:

Server {
    Hören Sie 443 SSL;
    Servername Ihre_Domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    Standort / {
        auth_basic „Eingeschränkter Zugriff“;
        auth_basic_user_file /etc/nginx/.htpasswd;

        Proxy_Pass http://127.0.0.1:8050;
        Proxy_Redirect aus;
        Proxy_set_header Host $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

In dieser Konfiguration aktivieren wir die Basisauthentifizierung mithilfe der auth_basic-Direktive und geben eine Passwortdatei /etc/nginx/.htpasswd an. Sie müssen das Tool htpasswd verwenden, um diese Passwortdatei zu erstellen und ihr den Benutzernamen und das Passwort hinzuzufügen.

Verwenden Sie die OAuth-Authentifizierung

Eine weitere gängige Methode ist die Verwendung der OAuth-Authentifizierung. Über OAuth können Sie den Authentifizierungsprozess des Benutzers an externe Identitätsanbieter wie Google, GitHub usw. delegieren. Sobald sich ein Benutzer erfolgreich bei einem externen Identitätsanbieter authentifiziert hat, kann er auf Ihre Anwendung zugreifen.

Sie können die Dash-Auth-Bibliothek von Dash verwenden, um die OAuth-Authentifizierung zu implementieren. Diese Bibliothek bietet eine einfache Möglichkeit, mehrere OAuth-Anbieter zu integrieren und den Zugriff auf Dash-Anwendungen einzuschränken.

Berechtigungsverwaltung hinzufügen

Zusätzlich zur Authentifizierung möchten Sie möglicherweise Benutzern auch erlauben, zu bestimmen, ob sie Zugriff auf bestimmte Daten oder Funktionen haben. Ein gängiger Ansatz besteht darin, ein rollenbasiertes Zugriffskontrollsystem (RBAC) in der Anwendung zu implementieren. Mit RBAC können Sie Benutzern verschiedene Rollen zuweisen und den Zugriff auf verschiedene Rollen in Ihrer Anwendung beschränken.

Sie können in Ihrer Dash-Anwendung ein RBAC-System implementieren, um zu bestimmen, ob ein Benutzer basierend auf seiner Rolle die Berechtigung hat, bestimmte Aktionen auszuführen. Dies kann die Überprüfung der Rolle eines Benutzers bei der Anmeldung und die dynamische Anpassung der Funktionalität und des Datenzugriffs in der App basierend auf der Rolle umfassen.

Protokollierung und Fehlerbehandlung

Protokollierung und Fehlerbehandlung sind bei der Bereitstellung von Anwendungen in Produktionsumgebungen sehr wichtig. Eine gute Protokollierung kann Ihnen helfen, den Betrieb Ihrer Anwendung zu verfolgen und Probleme rechtzeitig zu erkennen und zu lösen. Die Fehlerbehandlung kann die Anwendungsstabilität verbessern und durch Fehler verursachte Dienstunterbrechungen reduzieren.

Protokollierung konfigurieren

Lassen Sie uns zunächst die Protokollierung für unsere Anwendung konfigurieren. Dash-Anwendungen geben Protokolle normalerweise an stdout oder stderr aus. Wir können diese Protokolle aufzeichnen, indem wir sie in eine Datei umleiten. Wir können auch das Protokollierungsmodul von Python verwenden, um eine erweiterte Protokollierung zu implementieren.

Protokollierung importieren

logging.basicConfig(filename='app.log', level=logging.INFO)

Durch das Hinzufügen des obigen Codes zur Dash-Anwendung wird das Protokoll in einer Datei namens app.log protokolliert und die Protokollierungsebene auf INFO gesetzt. Sie können die Protokollebene nach Bedarf anpassen, um verschiedene Informationsebenen zu protokollieren.

Fehlerbehandlung

Ein weiterer wichtiger Aspekt ist die Fehlerbehandlung. Wenn in der Anwendung Fehler auftreten, möchten wir diese Fehler erfassen und protokollieren und gleichzeitig benutzerfreundliche Fehlermeldungen bereitstellen.

In einer Dash-Anwendung können Sie Try-Except-Blöcke verwenden, um Ausnahmen abzufangen und eine Fehlerseite zurückzugeben oder eine benutzerfreundliche Fehlermeldung anzuzeigen, wenn eine Ausnahme auftritt.

@app.server.errorhandler(Ausnahme)
def handle_error(e):
    logging.error(f'Ein Fehler ist aufgetreten: {str(e)}')
    return html.H1("Ups! Etwas ist schiefgelaufen."), 500

Im obigen Code definieren wir eine Fehlerbehandlungsfunktion handle_error, die alle Ausnahmen abfängt. Wenn eine Ausnahme auftritt, wird die Fehlermeldung protokolliert und eine Seite mit der Fehlermeldung an den Benutzer zurückgegeben.

Durch eine gute Protokollierung und Fehlerbehandlung können wir den Betrieb der Anwendung besser verstehen und bei Fehlern geeignete Maßnahmen ergreifen, um die Stabilität und Zuverlässigkeit der Anwendung sicherzustellen.

Überwachung und Leistungsoptimierung

Sobald die Anwendung in einer Produktionsumgebung bereitgestellt wird, müssen wir schließlich auch regelmäßig die Leistung der Anwendung überwachen und Maßnahmen zur Leistungsoptimierung ergreifen. Dazu gehört die Überwachung der Reaktionszeit, der Speichernutzung, der CPU-Auslastung und anderer Indikatoren der Anwendung sowie die Optimierung basierend auf den Überwachungsergebnissen.

Sie können Überwachungstools wie Prometheus, Grafana usw. verwenden, um Anwendungsleistungsindikatoren zu überwachen und basierend auf den Überwachungsergebnissen Anpassungen und Optimierungen vorzunehmen.

Zusammenfassen

In diesem Artikel werden die wichtigsten Schritte und notwendigen Maßnahmen zur Bereitstellung von Dash-Anwendungen in einer Produktionsumgebung beschrieben. Zuerst haben wir besprochen, wie man Dash-Anwendungen mit Gunicorn und Nginx bereitstellt, und gezeigt, wie man die Anwendungssicherheit durch das HTTPS-Protokoll verbessern kann. Als Nächstes untersuchten wir, wie Benutzerauthentifizierungs- und Rechteverwaltungssysteme integriert werden und wie Protokollierung und Fehlerbehandlung konfiguriert werden, um die Anwendungsstabilität und -zuverlässigkeit zu verbessern. Abschließend betonen wir die Bedeutung der Überwachung und Leistungsoptimierung und schlagen einige Überwachungstools und Optimierungsmethoden vor. Durch diese Maßnahmen können wir die Dash-Anwendung in der Produktionsumgebung bereitstellen, sie in der Produktionsumgebung robuster und zuverlässiger machen und den Benutzern hochwertige Dienste und Erfahrungen bieten.

Klicken Sie hier, um zu folgen und so schnell wie möglich mehr über die neuen Technologien von Huawei Cloud zu erfahren~