更完善的銷售儀表板
第 1 章的電商公司又來找你，並提供了預算，請你在先前的成果上延伸，打造一個基本的概念驗證（proof-of-concept）銷售儀表板。
現在你已經掌握了樣式與定位技巧，可以把這個儀表板打磨得足以正式對外展示。
提醒一下，他們希望看到每月總銷售額的折線圖、各國總銷售額的長條圖，以及針對此期間最高訂單數量的高層摘要統計。不過，他們偏好將這些圖並排呈現，且企業識別手冊要求使用淺藍色背景。他們也要求在主標題左右各放一個商標，讓品牌更加醒目。
本練習屬於課程
使用 Dash 與 Plotly 建立儀表板
練習說明
- 在第 17 行下方，將左側商標加入並與 H1 並排，且設為
25px的外距（margin）。 - 在第 22 行下方，將右側商標加入並與 H1 並排，且設為
25px的外距（margin）。 - 在第 25 行下方，將折線圖設為
500px寬，並排顯示，且設為5px的外距（margin）。 - 在第 28 行下方，將長條圖設為
350px寬，並排顯示，且設為5px的外距（margin）。
動手互動練習
試著完成這個範例程式碼，體驗一下這個練習。
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)