Dash 组件中的用户输入

使用 Dash 和 Plotly 构建仪表板

Alex Scriven

Data Scientist

为何需要用户输入？

用户输入的常见用法：

跨大范围数值过滤（number 输入）
- 想象一个含 2000 个年份的下拉框！
基于文本匹配过滤（search 或 text）
创建登录（password 与 email/text）

Dash 中的用户输入

用户输入是 Dash Core Components 的 Input 类型（dcc.Input）

为回调集成，必须提供 id
type 默认为 text
placeholder 显示淡化的引导文本

一个小矩形框，黑色边框，内部淡灰色文字"Enter your text"

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

使用输入

输入会变成一个 Python 变量
与回调配合使用

# @callback()
def update_plot(entered_data):
    fig = px.scatter(
    data_frame=sales, 
    y='OrderValue', x='Quantity',
    , title=f'{entered_data}')
    return fig

用户输入类型

基础类型：'text'、'number'、'password'、'email'
更专用：
- 'range' 生成范围滑块
- 'tel' 与 'url' 用于电话号码与网站 URL
进阶：
- 'search' 与 'hidden' 涉及高级浏览器交互

限制用户输入

type 参数会自动设置一些限制。

例如，email 类型要求 [email protected] 格式

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

一个输入框的动图：输入"some-text"，鼠标离开后外框变红提示错误。随后重新进入并在末尾补上"@gmail.com"，再次离开时不报错

切换输入状态

用 disabled 以编程方式禁用输入

用 required 强制必须填写

dcc.Input() 的布尔参数（True/False）

一个长方形输入框的动图：鼠标尝试点击但无法聚焦。框内文字为"已禁用的输入"。

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

一个长方形输入框的动图：鼠标点击进入又离开，未输入文本。离开后外框变红提示错误。框内文字为"必填输入"。

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

何时更新

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

逐步过滤：R、Re、Red、Redd

一个文本输入框动图，提示语为"Filter Product Descriptions"。逐字输入 R-E-D-D，下面图表随之逐步减少数据；全部输入后无数据可用，表示无描述包含"redd"。

¡Vamos a practicar!