條件式下拉選單選項

電商公司的資深採購人員提出了一個有趣的問題。他們現有的儀表板會顯示各小類商品的月銷售額，並採用兩層下拉選單（大類與小類），但選項實在太多了。更讓人困擾的是，你被告知第二層下拉選單中出現了一些其實無法被選取的選項。

你向利害關係人保證可以協助——這正是你運用串接回呼建立條件式下拉選單的大好機會。

本練習屬於課程

使用 Dash 與 Plotly 建立儀表板

檢視課程

練習說明

在第 31 行之後建立一個回呼，根據 major_cat_dd 下拉選單的值來更新 minor_cat_dd 下拉選單的 options。
將第 39 行之後的變數 relevant_minor_options 重新格式化為一個字典清單，且每個字典的 label 與 value 鍵相同。
在第 43 行之後再建立一個回呼，根據 minor_cat_dd 下拉選單的值來更新 sales_line 圖形的 figure。

動手互動練習

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

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import pandas as pd
ecom_sales = pd.read_csv('/usr/local/share/datasets/ecom_sales.csv')
major_categories = list(ecom_sales['Major Category'].unique())
minor_categories = list(ecom_sales['Minor Category'].unique())
logo_link = 'https://assets.datacamp.com/production/repositories/5893/datasets/fdbe0accd2581a0c505dab4b29ebb66cf72a1803/e-comlogo.png'
ecom_country = ecom_sales.groupby('Country')['OrderValue'].agg(['sum', 'count']).reset_index().rename(columns={'count':'Sales Volume', 'sum':'Total Sales ($)'})

app = Dash()

app.layout = [
  html.Img(src=logo_link, style={'margin':'30px 0px 0px 0px'}),
  html.H1('Sales breakdowns'),
  html.Div([
    html.H2('Controls'),
    html.Br(),
    html.H3('Major Category Select'),
    dcc.Dropdown(
      id='major_cat_dd',
      options=[{'label':category, 'value':category} for category in major_categories],
      style={'width':'200px', 'margin':'0 auto'}),
    html.Br(),
    html.H3('Minor Category Select'),
    dcc.Dropdown(id='minor_cat_dd', style={'width':'200px', 'margin':'0 auto'})],
    style={'width':'350px', 'height':'350px', 'display':'inline-block', 
           'vertical-align':'top', 'border':'1px solid black', 'padding':'20px'}),
  dcc.Graph(id='sales_line',style={'width':'700px', 'height':'650px','display':'inline-block'})
]

# Create a callback from the Major Category dropdown to the Minor Category Dropdown
@callback(
    Output('____', '____'),
    Input('major_cat_dd', 'value'))

def update_minor_dd(major_cat_dd):
    major_minor = ecom_sales[['Major Category', 'Minor Category']].drop_duplicates()
    relevant_minor_options = major_minor[major_minor['Major Category'] == major_cat_dd]['Minor Category'].values.tolist()
    # Set up the Major Category options with the same label and value
    formatted_relevant_minor_options = [{'label':____, 'value':____} for ____ in ____]
    return formatted_relevant_minor_options

# Create a callback for the Minor Category dropdown to update the line plot
@callback(
    Output('____', '____'),
    Input('minor_cat_dd', 'value'))

def update_line(minor_cat):
    minor_cat_title = 'All'
    ecom_line = ecom_sales.copy()
    if minor_cat:
        minor_cat_title = minor_cat
        ecom_line = ecom_line[ecom_line['Minor Category'] == minor_cat]
    ecom_line = ecom_line.groupby('Year-Month')['OrderValue'].agg('sum').reset_index(name='Total Sales ($)')
    line_graph = px.line(ecom_line, x='Year-Month',  y='Total Sales ($)', title=f'Total Sales by Month for Minor Category: {minor_cat_title}')
    return line_graph

if __name__ == '__main__':
    app.run(debug=True)

編輯並執行程式碼