LoslegenKostenlos starten

Logos und Notizen hinzufügen

Ein Bild (oder ein Diagramm!) sagt mehr als tausend Worte – trotzdem brauchen Dashboards manchmal erklärende Notizen. Zum Glück hast du geübt, wie du Text hinzufügen und formatieren kannst, ebenso wie Bilder und weitere Struktur in deinen Dash-Apps.

Erstellen wir ein Dashboard mit dem Firmenlogo, einem einzelnen Diagramm und ein paar kurzen Erläuterungen.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>
Kurs ansehen

Übungsanweisungen

  • Füge unter Zeile 13 das Firmenlogo mit der URL logo_link hinzu.
  • Ergänze nach dem bereitgestellten Text in Zeile 20 die Variable top_country in fett.
  • Füge unter Zeile 24 den Urheberrechtshinweis des Unternehmens ' Copyright E-Com INC' in Kursiv hinzu.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/2bac9433b0e904735feefa26ca913fba187c0d55/e_com_logo.png'
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)').sort_values(by='Total Sales ($)', ascending=False)
top_country = ecom_bar.loc[0]['Country']            
bar_fig_country = px.bar(ecom_bar, x='Total Sales ($)', y='Country', color='Country', color_discrete_map={'United Kingdom':'lightblue', 'Germany':'orange', 'France':'darkblue', 'Australia':'green', 'Hong Kong':'red'})         
    
app = Dash()

app.layout = [
  # Add the company logo
  html.____(src=____),
  html.H1('Sales by Country'),
  dcc.Graph(
    figure=bar_fig_country,
    style={'width':'750px', 'margin':'auto'}),
  html.Span(children=[
    # Add the top country text
    'This year, the most sales came from: ', 
    html.____(____),
    html.Br(),
    # Italicize copyright notice
    html.____(' Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Code bearbeiten und ausführen