Inizia subitoInizia gratis

Applicare lo stile a un'app Dash con CSS

È il momento di sprigionare la potenza del CSS e portare i tuoi dashboard al livello successivo. Stai pensando a come rinfrescare il dashboard di marketing che hai creato e hai alcune idee da mostrare agli stakeholder di business.

Regolare le dimensioni del grafico e del logo e aggiungere colori di sfondo gradevoli ai vari elementi lo renderà molto più accattivante!

Questo esercizio fa parte del corso

Creare dashboard con Dash e Plotly

Visualizza corso

Istruzioni dell'esercizio

  • Imposta le dimensioni del logo a 215px di larghezza e 240px di altezza sotto la riga 16.
  • Imposta le dimensioni del grafico a barre a 500px di larghezza e 350px di altezza sotto la riga 21.
  • Aggiungi un colore di sfondo lightgrey all'avviso di copyright sotto la riga 30.

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