Eine HTML-Liste zu Dash hinzufügen

Während du an deinem Schreibtisch arbeitest, hat jemand aus dem Marketing dein letztes kleines Dashboard gesehen und dich gebeten, eines für das Team zu erstellen. Sie möchten ein Balkendiagramm der Top-Kategorien nach Gesamtumsatz, mit einer Liste darunter, die die wichtigsten Kategorien für einen schnellen Überblick aufführt.

Außerdem haben sie ein paar stilistische Hinweise, die aber alle in deinem Wissensbereich liegen, dank deiner jüngsten Arbeit mit HTML und Dash.

Deine Aufgabe ist es, das von dir erstellte Dashboard zu erweitern und eine Liste der Top-Kategorien und ihres Verkaufsvolumens hinzuzufügen.

Diese Übung ist Teil des Kurses

<Kurs>Dashboards mit Dash und Plotly erstellen</Kurs>

Kurs ansehen

Übungsanweisungen

Erstelle unterhalb von Zeile 20 mit Dash eine geordnete Liste.
Füge unterhalb von Zeile 22 zwei Listenelemente zur geordneten Liste hinzu, die die Variablen num1_cat und num2_cat mit ihren Verkaufsvolumina enthalten.
Füge unterhalb von Zeile 26 einen Zeilenumbruch ein, damit der Copyright-Hinweis alleine steht.

Interaktive praktische Übung

Versuche dich an dieser Übung, indem du diesen Beispielcode vervollständigst.

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)

Code bearbeiten und ausführen