Kom igångKom igång gratis

Byta till mörkt läge

En vanlig trend inom mjukvaruprodukter och webbsidor är att erbjuda ett "mörkt läge" – ett gränssnitt som är skonsamt mot ögonen och som många föredrar. I mörkt läge är bakgrunden svart och texten vit.

Din uppgift är att ta dashboarden du skapade i föregående övning och växla den till "den mörka sidan". Det innebär att du ändrar bakgrunds- och textfärgen på ditt diagram och dina HTML-element.

Större delen av den tidigare dashboarden finns redan med, inklusive de diagram som behövs. Det återstår dock ett viktigt arbete för att ställa om dashboarden till mörkt läge. I den här övningen kan du använda färgnamn i stället för RGB-koder.

Den här övningen är en del av kursen

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Ange teckensnittsfärgen för stapeldiagrammet så att den matchar mörkt läge under rad 10 (bakgrund black, text white).
  • Lägg till den nya logotypen med hjälp av variabeln logo_link under rad 16.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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/1c95273e21a54b5ca48e0b03cc0c1faeafb3d7cd/e-comlogo_white.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')

# Set the font color of the bar chart
ecom_bar.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'black', 'font': {'color':'____'}})

app = Dash()

app.layout = [
    # Add the new logo
    html.Img(
    	src=____,
    	style={'width':'165px', 'height':'50px'}),
    html.H1('Top Sales Categories'),
    dcc.Graph(
    	figure=ecom_bar,
    	style={'width':'500px', 'height':'350px', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I('Copyright E-Com INC')])
    ]

if __name__ == '__main__':
    app.run(debug=True)
Redigera och kör kod