शुरू करेंमुफ़्त में शुरू करें

Dash में HTML लिस्ट जोड़ना

जब आप अपनी डेस्क पर काम कर रहे थे, तो Marketing विभाग के किसी व्यक्ति ने आपका पिछला छोटा डैशबोर्ड देखा और आपसे उनके लिए एक डैशबोर्ड बनाने को कहा. वे कुल बिक्री राशि के आधार पर शीर्ष केटेगरी का एक बार चार्ट चाहते हैं, और उसके नीचे एक लिस्ट जिसमें जल्दी झलक के लिए कुछ टॉप केटेगरी नोट की गई हों.

उन्होंने कुछ स्टाइलिंग से जुड़ी बातें भी बताई हैं, लेकिन आपके हाल के HTML और Dash वाले काम को देखते हुए, वे सब आपकी पहुँच में लगती हैं.

आपका काम है कि आपने जो डैशबोर्ड बनाया था, उसे बढ़ाकर उसमें शीर्ष केटेगरी और उनकी बिक्री वॉल्यूम की एक लिस्ट शामिल करें.

यह अभ्यास पाठ्यक्रम का हिस्सा है

Dash और Plotly के साथ डैशबोर्ड बनाना

पाठ्यक्रम देखें

अभ्यास निर्देश

  • लाइन 20 के नीचे Dash का उपयोग करके एक ordered list बनाएँ.
  • लाइन 22 के नीचे ordered list में दो list elements जोड़ें, जिनमें num1_cat और num2_cat वैरिएबल उनकी sales volumes के साथ हों.
  • लाइन 26 के नीचे एक line break जोड़ें ताकि कॉपीराइट नोटिस अलग लाइन पर दिखे.

इंटरैक्टिव व्यावहारिक अभ्यास

इस अभ्यास को इस नमूना कोड को पूरा करके आज़माएँ।

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)
कोड संपादित करें और चलाएँ