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

ऑब्जेक्ट लेआउट नियंत्रित करना

Dash के साथ आपका काम आपकी संस्था में काफी असर दिखा रहा है. लेकिन आपके एक सहयोगी ने अपने एक डैशबोर्ड की समस्या को लेकर आपसे संपर्क किया है. उनके मन में जो डैशबोर्ड है उसमें सबसे ऊपर कंपनी का लोगो है, और उसके बाद एक-दूसरे के बगल में दो बार चार्ट होने चाहिए.

लेकिन लोगो सबसे ऊपर के बहुत पास है, और ग्राफ़ एक-दूसरे के ऊपर स्टैक हो रहे हैं. क्या गड़बड़ है!

आपको लगता है कि CSS का अपना ज्ञान इस्तेमाल करके आप इन ऑब्जेक्ट्स को सही जगह पर ला सकते हैं.

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

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

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

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

  • लाइन 15 के नीचे दिए गए लोगो के सिर्फ ऊपर 30px का margin जोड़ें और बाकी सभी किनारों पर कोई margin न रखें.
  • लाइन 19 के नीचे दिए गए दोनों ग्राफ़ पर ऐसा styling जोड़ें कि वे side-by-side दिखाई दें.

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

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

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/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_bar_major_cat = ecom_sales.groupby('Major Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
ecom_bar_minor_cat = ecom_sales.groupby('Minor Category')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
bar_fig_major_cat = px.bar(ecom_bar_major_cat, x='Total Sales ($)', y='Major Category', color='Major Category', color_discrete_map={'Clothes':'blue','Kitchen':'red','Garden':'green','Household':'yellow'})
bar_fig_minor_cat = px.bar(ecom_bar_minor_cat, x='Total Sales ($)', y='Minor Category')                    

app = Dash()

app.layout = [
	html.Img(src=logo_link,
		# Add margin to the logo
		style={'margin':'____ ____ ____ ____'}),
	html.H1('Sales breakdowns'),
	dcc.Graph(
		# Style the graphs to appear side-by-side
		figure=bar_fig_major_cat,
		style={'display':'____', 'width': '49%'}),
	dcc.Graph(
		figure=bar_fig_minor_cat,
		style={'display':'____', 'width': '49%'}), 
  ]

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