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

CSS के साथ Dash ऐप को स्टाइल करना

अब CSS की ताकत दिखाने और अपने डैशबोर्ड्स को अगले स्तर पर ले जाने का समय है। आपने बनाए गए मार्केटिंग डैशबोर्ड को और आकर्षक बनाने के तरीकों के बारे में सोचा है और बिज़नेस स्टेकहोल्डर्स को दिखाने के लिए कुछ आइडिया हैं।

ग्राफ़ और लोगो का साइज़ समायोजित करना, और अलग-अलग एलिमेंट्स में अच्छे बैकग्राउंड कलर जोड़ना इसे और जीवंत बना देगा!

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

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

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

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

  • लाइन 16 के नीचे लोगो का साइज़ 215px चौड़ा और 240px ऊँचा सेट करें।
  • लाइन 21 के नीचे बार ग्राफ़ का साइज़ 500px चौड़ा और 350px ऊँचा सेट करें।
  • लाइन 30 के नीचे कॉपीराइट नोटिस में lightgrey का बैकग्राउंड रंग जोड़ें.

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

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

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)
top_cat = ecom_category.loc[0]['Minor Category']
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'}, 'paper_bgcolor':'rgb(224, 255, 252)'})         

app = Dash()

app.layout = [
    html.Img(
    	src=logo_link,
    	# Set the size of the logo
    	style={'____':'____', '____':'____'}), 
    html.H1('Top Sales Categories'),
	dcc.Graph(
		figure=ecom_bar,
        # Set the size of the bar graph
		style={'____':'____', '____':'____', 'margin':'auto'}),
    html.Br(),
    html.Span(children=[
    'The top category was: ',
    html.B(top_cat),
    html.Br(),
    html.I(
		'Copyright E-Com INC',
    	# Add a background color to the copyright notice
    	style={'____':'____'})])
    ]

if __name__ == '__main__':
    app.run(debug=True)
कोड संपादित करें और चलाएँ