Dash 元件中的使用者輸入

使用 Dash 與 Plotly 建立儀表板

Alex Scriven

Data Scientist

為什麼要使用者輸入？

 

使用者輸入的常見應用：

  • 大範圍數值篩選（number 輸入）
    • 想像一個含 2000 個年份的下拉選單！
  • 文字比對篩選（search 或 text 輸入）
  • 建立登入（password 與 email/text 輸入）
使用 Dash 與 Plotly 建立儀表板

Dash 中的使用者輸入

 

使用者輸入是 dash core components 的 Input 類型（dcc.Input）

  • 需要 id 才能串接 callback
  • type 預設為 text
  • placeholder 顯示淡色引導文字

內有淡灰色「Enter your text」文字的黑邊矩形小圖

 

dcc.Input(
    id='my_input',
    type='text',
    placeholder="Enter your text")
使用 Dash 與 Plotly 建立儀表板

使用輸入值

 

  • 輸入會成為一個 Python 變數
  • 與 callback 搭配使用

 

# @callback()
def update_plot(entered_data):
    fig = px.scatter(
    data_frame=sales, 
    y='OrderValue', x='Quantity',
    , title=f'{entered_data}')
    return fig
使用 Dash 與 Plotly 建立儀表板

使用者輸入型別

 

  • 有些很直觀：'text'、'number'、'password'、'email'
  • 有些較特殊：
    • 'range' 會產生區間滑桿
    • 'tel' 與 'url' 用於電話與網站網址
  • 有些較進階：
    • 'search' 與 'hidden' 牽涉進階的瀏覽器互動
使用 Dash 與 Plotly 建立儀表板

限制輸入內容

 

type 參數會自動套用一些限制。

dcc.Input(
    id='my_input',
    type='email',
    placeholder="Enter your email")

   

一個輸入框的動圖：先輸入 'some-text' 並移開游標，外框轉紅顯示錯誤；再補上 '@gmail.com' 後移開，錯誤消失

使用 Dash 與 Plotly 建立儀表板

更多限制選項

  • number 型別僅允許數字
    • 另外可用 min 與 max 設定數值範圍
    • text 輸入可用 minLength / maxLength
  • text 型別也可用 pattern 做正規表示式驗證

   

一個含上下調整鍵的小方框動圖：點擊變成 1，再變 0；輸入 249 無異常；輸入 251 則外框轉紅顯示錯誤

dcc.Input(
    id='my_input',
    type='number',
    max=250)
使用 Dash 與 Plotly 建立儀表板

切換輸入狀態

 

  • 以程式關閉輸入：使用 disabled

   

   

  • 強制必填：使用 required

$$

  • dcc.Input() 的 True/False 參數

 

一個矩形輸入框的動圖：滑鼠嘗試點選但無法聚焦。框內文字為「A disabled input」

dcc.Input(id='my_input', disabled=True)

一個矩形輸入框的動圖：滑鼠點入又離開，未輸入文字就外框轉紅顯示錯誤。框內文字為「A Required input」

dcc.Input(id='my_input', required=True)
使用 Dash 與 Plotly 建立儀表板

何時更新

 

$$

dcc.Input(id='my_input', type='text',
          debounce=False)

$$

  • 逐步篩選 R、Re、Red、Redd

一個文字輸入框的動圖：placeholder 為「Filter Product Descriptions」。逐字輸入 R-E-D-D，下方圖表每輸入一字資料就減少；輸入完成後無可用資料

使用 Dash 與 Plotly 建立儀表板

一起來練習吧！

使用 Dash 與 Plotly 建立儀表板

Preparing Video For Download...