LoslegenKostenlos starten

Objektlayout steuern

Deine Arbeit mit Dash zeigt in deiner Organisation echt Wirkung. Allerdings hat sich eine Kollegin bzw. ein Kollege gemeldet, weil es ein Problem mit einem der Dashboards gibt. Das geplante Dashboard soll oben das Firmenlogo zeigen, gefolgt von zwei Balkendiagrammen nebeneinander.

Aber das Logo sitzt zu nah am oberen Rand, und die Diagramme sind übereinander gestapelt. Was für ein Durcheinander!

Du meinst, dass du mit deinem CSS-Wissen die Objekte an die richtige Stelle rücken kannst.

Diese Übung ist Teil des Kurses

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

Übungsanweisungen

  • Füge unter Zeile 15 dem Logo ausschließlich oben einen 30px-Außenabstand hinzu und lass alle anderen Seiten ohne Außenabstand.
  • Füge unter Zeile 19 beiden Diagrammen Styling hinzu, damit sie nebeneinander erscheinen.

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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

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