開始使用免費開始

銷售儀表板草稿

你先前替這家電商公司做得很出色，因此他們請你協助徹底汰換現有的儀表板。現有方案需要專有軟體，導致公司每個月花費驚人。

這次不求最終成品，他們想先看看使用 Dash 能做到的初步雛形。他們希望看到每月總銷售額的折線圖，以及各國家總銷售額的長條圖。若能再補上一個高層級摘要統計會更好，例如哪一個月份的訂單量最大。

你的任務是用彼此堆疊的 Plotly 圖形，快速建立一個儀表板。

本練習屬於課程

使用 Dash 與 Plotly 建立儀表板

檢視課程

練習說明

  • 在第 14 行設定 Dash 版面配置（layout）。
  • 在第 17 行加入變數 line_fig。
  • 在第 19 行加入變數 bar_fig。
  • 加上一個 .H3() 標題，顯示 max_country（總銷售額最高的國家）。

動手互動練習

試著完成這個範例程式碼，體驗一下這個練習。

from dash import Dash, dcc, html
import pandas as pd
import plotly.express as px
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='Total Sales ($)')
line_fig = px.line(data_frame=ecom_line, x='Year-Month', y='Total Sales ($)', title='Total Sales by Month')
ecom_bar = ecom_sales.groupby('Country')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
max_country = ecom_bar.sort_values(by='Total Sales ($)', ascending=False).loc[0]['Country']
bar_fig = px.bar(data_frame=ecom_bar, x='Total Sales ($)', y='Country', orientation='h', title='Total Sales by Country')

app = Dash()

# Set up the layout
app.____ = [
    html.H1('Sales Figures'), 
    # Add the line figure
    dcc.___(id='my-line-fig', figure=____), 
    # Add the bar figure
    dcc.___(id='my-bar-fig', figure=____), 
    # Add the H3 title
    html.____(f'The largest country by sales was {____}!')
    ]

if __name__ == '__main__':
    app.run(debug=True)
編輯並執行程式碼