Dash-Komponenten positionieren

Dashboards mit Dash und Plotly erstellen

Alex Scriven

Data Scientist

HTML und das Web

HTML: Sprache zum Strukturieren von Websites

HTML: Holzgerüst eines Hauses
- Legt die Platzierung von Objekten fest
CSS: Wandfarbe eines Zimmers
- Stil (z. B. Hintergrundfarbe) von Objekten

das offizielle HTML-Logo. Es steht HTML in blauer Schrift

das offizielle CSS-Logo. Es steht CSS in blauer, geprägter Schrift

Div- und H-Tags

Dash nutzt dash.html als Schnittstelle zwischen HTML und Python

Zwei wichtige HTML-Strukturen („Tags"):

Div-Tags: wichtig zum Strukturieren von Websites
- Viele unterschiedlich große Divs mit Verschiedenem darin möglich
H-Tags: verschieden große Titel (H1 > H6)

Div- und H-Tags verwenden

Übergeordnetes Div (alles darin)
Inneres Div: roter Hintergrund
Div mit blauem Hintergrund
- H-Tags darin
Den style-Teil ignorieren – mehr zu „CSS" später!

<div>
  <div style="background-color: red; 
              width:250; height:250;">
  </div>
  <div style="background-color: lightblue; 
              width:250; height:250;">
    <h1>This box</h1>
    <h2>Another Title</h2>
  </div>
</div>

Unser Beispiel angezeigt

Ein Bild einer blauen Box mit gepunkteter Umrandung. Oben links darin befindet sich eine ausgefüllte rote Box. Darunter eine ausgefüllte blaue Box mit den Wörtern „This box" und „another title" darin

Merke dir:

Div mit rotem Hintergrund
Div mit blauem Hintergrund und H-Tags

Unser Beispiel in Dash

HTML-Beispiel mit Dash nachbauen

from dash import Dash, html
app = Dash()
app.layout = [
    html.Div(style={'height':250, 'width':250, 'background-color':'red'}),
    html.Div(children=[
        html.H1("This box"),
        html.H2("Another Title")], 
        style={'background-color':'lightblue'})
    ]

Das Layout zerlegen

HTML-Tags entsprechen Dash html.()
- html.Div() = <div>
- html.H1() = <h1>
Das letzte Div hat ein children-Argument
- Eine Liste von Objekten, die hinein sollen
Wir können auch dcc.Graph()-Komponenten hineinstellen!

from dash import Dash, html
app.layout = [
  html.Div(
    style={'background-color':'red', 
           'height':250, 'width':250}),
  html.Div(
  children=[
      html.H1("This box"),
      html.H2("Another Title")]
    ,style={'background-color':'lightblue', 
              'height':250, 'width':250})
]

Diagramme im Layout

bar_fig_country = px.bar(ecom_sales, 
 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 = [
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Ein GIF eines horizontalen Balkendiagramms der gesamten Verkäufe auf der x-Achse nach Land auf der y-Achse in einem Chrome-Browser. Die Länder haben unterschiedliche Farben. Die Maus fährt über das Diagramm und dann in die URL-Leiste mit der Serveradresse

Mehr Struktur hinzufügen

app.layout = [
  html.Div(style={
    'width':150,'height':150, 
    'background-color':'lightblue'}),
  html.H1("Sales Proportion by Country"),
  dcc.Graph(id='bar_graph', 
            figure=bar_fig_country)
]

Ein GIF derselben App wie in der vorherigen Übung, jedoch ist das Balkendiagramm weiter nach unten verschoben, und darüber befindet sich ein kleines hellblaues Kästchen

Lass uns üben!

Dashboards mit Dash und Plotly erstellen