Inizia subitoInizia gratis

Controllare il layout degli oggetti

Il tuo lavoro con Dash sta davvero avendo un impatto nella tua organizzazione. Tuttavia, un collega ti ha contattato per un problema che sta riscontrando con una delle sue dashboard. Nella dashboard che ha in mente, il logo dell'azienda è in alto, seguito da due grafici a barre affiancati.

Ma il logo è troppo vicino al bordo superiore e i grafici sono impilati uno sopra l'altro. Che caos!

Pensi di poter usare le tue conoscenze di CSS per sistemare questi oggetti al loro posto.

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Aggiungi un margine di 30px solo in alto al logo sotto la riga 15 e lascia tutte le altre direzioni senza margine.
  • Aggiungi uno stile a entrambi i grafici sotto la riga 19 in modo che compaiano affiancati.

esercizio interattivo pratico

Prova questo esercizio completando questo codice di esempio.

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)
Modifica ed esegui il codice