控制对象布局
您在 Dash 上的工作正在为组织带来实实在在的影响。不过，一位同事向您求助：他们的一个仪表板出现了布局问题。理想效果是顶部放置公司徽标，下面并排放置两个柱状图。
但现在徽标离顶部太近，而两个图表却上下堆叠。看起来一团糟！
您认为可以用自己对 CSS 的了解，把这些元素摆放到正确位置。
本练习是课程的一部分
使用 Dash 和 Plotly 构建仪表板
练习说明
- 在第
15行下面为徽标只添加上方30px的外边距，并让其他三个方向没有外边距。 - 在第
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)