更精致的销售仪表板
第 1 章中的这家电商公司再次联系了您，并为您提供了预算，让您在之前的基础上扩展，构建一个基础的销售仪表板原型。
现在您已经掌握了样式和布局的技能，可以把这个仪表板打磨到可以对外展示的水准。
提醒一下：公司希望看到每月总销售额的折线图、各国家总销售额的柱状图，以及关于该时期最高订单量的高层次汇总统计。不过，他们更希望这些图表并排展示，而且其企业风格指南要求使用浅蓝色背景。他们还要求在主标题两侧各放置一个徽标，以便品牌更加醒目。
本练习是课程的一部分
使用 Dash 和 Plotly 构建仪表板
练习说明
- 在第 17 行下方，将左侧徽标添加到 H1 旁边，并设置
25px的下边距。 - 在第 22 行下方，将右侧徽标添加到 H1 旁边，并设置
25px的下边距。 - 在第 25 行下方，将折线图设置为
500px宽，并排显示，且设置5px的边距。 - 在第 28 行下方，将柱状图设置为
350px宽，并排显示，且设置5px的边距。
交互式实操练习
通过完成这段示例代码来试试这个练习。
from dash import Dash, dcc, html
import plotly.express as px
import pandas as pd
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
ecom_line = ecom_sales.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='TotalSales')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='TotalSales',title='Total Sales by Month')
line_fig.update_layout({'paper_bgcolor':'rgb(224, 255, 252)' })
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='TotalSales')
bar_fig = px.bar(data_frame=ecom_bar, x='TotalSales', y='Country', orientation='h',title='Total Sales by Country')
bar_fig.update_layout({'yaxis':{'dtick':1, 'categoryorder':'total ascending'}, 'paper_bgcolor':'rgb(224, 255, 252)'})
app = Dash()
app.layout = [
html.Img(src=logo_link,
# Add the left-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
html.H1(children=['Sales Figures'],
style={'display':'inline-block'}),
html.Img(src=logo_link,
# Add the right-side logo next to the H1 with 25px margin
style={'display':'____', 'margin':'____'}),
dcc.Graph(figure=line_fig,
# Set line graph to 500px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
dcc.Graph(figure=bar_fig,
# Set bar graph to 350px wide, side-by-side with 5px margin
style={'width':'____', 'display':'____', 'margin':'____'}),
html.H3(f'The largest order quantity was {ecom_sales.Quantity.max()}')
]
if __name__ == '__main__':
app.run(debug=True)