ÎncepețiÎncepe gratuit

Adăugarea unei liste HTML în Dash

În timp ce lucrai la birou, cineva din departamentul de Marketing a văzut ultimul dashboard pe care l-ai creat și ți-a cerut să faci unul și pentru ei. Ar dori un grafic de tip bară cu categoriile de top după totalul vânzărilor, însoțit de o listă care să afișeze câteva dintre categoriile fruntașe pentru o privire rapidă.

Au și câteva preferințe de stil, dar toate par să fie în sfera cunoștințelor tale, având în vedere experiența recentă cu HTML și Dash.

Sarcina ta este să extinzi dashboardul creat anterior, adăugând o listă cu categoriile de top și volumul lor de vânzări.

Acest exercițiu face parte din cursul

Crearea dashboardurilor cu Dash și Plotly

Vezi cursul

Instrucțiuni pentru exercițiu

  • Creează o listă ordonată sub linia 20 folosind Dash.
  • Adaugă două elemente de listă care conțin variabilele num1_cat și num2_cat împreună cu volumele lor de vânzări în lista ordonată, sub linia 22.
  • Adaugă un rând nou sub linia 26, astfel încât mențiunea de copyright să apară pe rândul său.

Exercițiu interactiv practic

Încearcă acest exercițiu completând acest cod de exemplu.

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)
Editează și rulează codul