Kom igångKom igång gratis

Lägga till en HTML-lista i Dash

En kollega från marknadsavdelningen såg den senaste dashboarden du skapade och vill att du ska ta fram en till dem. De önskar ett stapeldiagram över de bästa kategorierna efter total försäljning, samt en lista nedanför där de viktigaste kategorierna visas för en snabb överblick.

De har också några stilistiska önskemål, men de faller alla inom vad du redan kan efter ditt arbete med HTML och Dash.

Din uppgift är att bygga ut dashboarden så att den inkluderar en lista över de bästa kategorierna och deras försäljningsvolym.

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

Bygg dashboards med Dash och Plotly

Visa kurs

Övningsinstruktioner

  • Skapa en numrerad lista nedanför rad 20 med hjälp av Dash.
  • Lägg till två listelement som innehåller variablerna num1_cat och num2_cat med deras försäljningsvolymer i den numrerade listan nedanför rad 22.
  • Lägg till en radbrytning nedanför rad 26 så att copyrightmeddelandet visas på en egen rad.

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/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)
num1_cat, num1_salesvol = ecom_category.loc[0].tolist()[1:3]
num2_cat, num2_salesvol = ecom_category.loc[1].tolist()[1:3]
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'}})             

app = Dash()

app.layout = [
    html.Img(src=logo_link),
    html.H1('Top Sales Categories'),
    dcc.Graph(figure=ecom_bar),
    html.Span(children=[
    'The top 2 sales categories were:',
    # Set up an ordered list
    html.____(children=[
      	# Add two list elements with the top category variables
        html.____(children=[____, ' with ', num1_salesvol, ' sales volume']),
        html.____(children=[____, ' with ', num2_salesvol, ' sales volume'])
    ], style={'width':'350px', 'margin':'auto'}),
    # Add a line break before the copyright notice
    html.____(),
    html.I('Copyright E-Com INC')])
    ]

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