BaşlayınÜcretsiz Başlayın

Nesne yerleşimini kontrol etme

Dash ile yaptığın çalışmalar kurumunda gerçekten etkisini gösteriyor. Ancak bir çalışma arkadaşın, panolarından biriyle yaşadığı bir sorun için sana ulaştı. Tasarladığı pano, en üstte şirket logosu, hemen altında yan yana iki çubuk grafik olacak şekilde düşünülmüş.

Ama logo tepeye fazla yakın ve grafikler üst üste yığılmış. Tam bir karmaşa!

CSS bilgini kullanarak bu nesneleri yerlerine oturtabileceğini düşünüyorsun.

Bu egzersiz

Dash ve Plotly ile Paneller Oluşturma

kursunun bir parçasıdır
Kursu Görüntüle

Egzersiz talimatları

  • Aşağıda 15. satırın altındaki logonun yalnızca üst tarafına 30px margin ekle ve diğer tüm kenarlarda margin olmasın.
  • Aşağıda 19. satırın altındaki her iki grafiğe de stil ekleyerek yan yana görünmelerini sağla.

Uygulamalı interaktif egzersiz

Bu örnek kodu tamamlayarak bu egzersizi bitirin.

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)
Kodu Düzenle ve Çalıştır