LoslegenKostenlos starten

Eine Dash-App mit CSS stylen

Es ist Zeit, die Power von CSS zu nutzen und deine Dashboards aufs nächste Level zu bringen. Du überlegst schon, wie du das von dir erstellte Marketing-Dashboard aufhübschen kannst, und hast ein paar Ideen, die du den Stakeholdern zeigen möchtest.

Wenn du die Größe des Diagramms und des Logos anpasst und einigen Elementen schöne Hintergrundfarben gibst, wirkt das Ganze gleich frischer!

Diese Übung ist Teil des Kurses

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

Übungsanweisungen

  • Setze die Logogröße unterhalb von Zeile 16 auf 215px Breite und 240px Höhe.
  • Setze die Größe des Balkendiagramms unterhalb von Zeile 21 auf 500px Breite und 350px Höhe.
  • Füge dem Copyright-Hinweis unterhalb von Zeile 30 die Hintergrundfarbe lightgrey 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_category = ecom_sales.groupby(['Major Category','Minor Category']).size().reset_index(name='Total Orders').sort_values(by='Total Orders', ascending=False).reset_index(drop=True)
top_cat = ecom_category.loc[0]['Minor Category']
ecom_bar = px.bar(ecom_category, x='Total Orders', y='Minor Category', color='Major Category')
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

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