控制物件版面配置
你在 Dash 上的成果已經為組織帶來明顯影響。不過，有位同事遇到他們其中一個儀表板的問題而來找你幫忙。他們預想的儀表板是頂端有公司標誌，接著兩個長條圖並排顯示。
但現在標誌離頂端太近，而且圖表被疊成上下排列。真是一團亂！
你認為可以用你對 CSS 的理解，把這些物件調整到正確的位置。
本練習屬於課程
使用 Dash 與 Plotly 建立儀表板
練習說明
- 在第
15行之後，僅為下方的標誌新增「只有上方」的30px外距（margin），其他三側不要有外距。 - 在第
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)