เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การควบคุม Layout ของอ็อบเจกต์

งานของคุณใน Dash กำลังสร้างผลกระทบที่ดีในองค์กร แต่เพื่อนร่วมงานได้ติดต่อมาเพื่อขอความช่วยเหลือเกี่ยวกับปัญหาใน Dashboard ของเขา Dashboard ที่เขาจินตนาการไว้มีโลโก้บริษัทอยู่ด้านบน ตามด้วยกราฟแท่งสองอันที่วางเคียงกัน

แต่ปัญหาคือโลโก้อยู่ชิดขอบบนมากเกินไป และกราฟทั้งสองซ้อนกันอยู่ ยุ่งเหยิงไปหมด!

คุณคิดว่าความรู้ด้าน CSS จะช่วยจัดการอ็อบเจกต์เหล่านี้ให้เข้าที่ได้

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย Dash และ Plotly

ดูคอร์ส

คำแนะนำการฝึกหัด

  • เพิ่ม margin ขนาด 30px ที่ด้านบนเท่านั้นของโลโก้ใต้บรรทัดที่ 15 โดยไม่ต้องกำหนด margin ให้ด้านอื่น
  • เพิ่ม styling ให้กราฟทั้งสองใต้บรรทัดที่ 19 เพื่อให้แสดงผลเคียงข้างกัน

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด