Dash 常用交互组件
Dash 基于 Python，允许开发者使用纯 Python 代码构建交互式的 Web 应用。
Dash 的核心组件之一是 dash.dcc（Dash Core Components），它提供了丰富的 UI 组件，如滑块、下拉菜单、图形等，这些组件可以帮助开发者快速构建功能强大的 Web 应用。
dash.dcc 组件包括但不限于：
- Graph：用于绘制各种图表，如折线图、柱状图、散点图等。
- Dropdown：下拉菜单，允许用户从多个选项中选择一个。
- Slider：滑块，允许用户通过拖动滑块选择一个数值范围。
- Input：输入框，允许用户输入文本或数字。
- Textarea：多行文本输入框，适用于输入较长的文本内容。
- Checklist：复选框列表，允许用户选择多个选项。
- RadioItems：单选按钮列表，允许用户从多个选项中选择一个。
- DatePickerSingle 和 DatePickerRange：日期选择器，允许用户选择单个日期或日期范围。
- Upload：文件上传组件，允许用户上传文件。
这些组件是构建交互式 Web 应用的基础，开发者可以通过组合这些组件来创建复杂的用户界面。
在最新版本的 Dash 中，推荐使用以下方式导入 dcc：
from dash import dcc
常用交互组件
| 组件 | 说明 | 示例代码 |
|---|---|---|
dcc.Input |
创建一个文本输入框。 | dcc.Input(id='input', type='text', placeholder='请输入内容...') |
dcc.Dropdown |
创建一个下拉菜单。 | dcc.Dropdown(id='dropdown', options=[{'label': '选项1', 'value': '1'}], value='1') |
dcc.Slider |
创建一个滑块。 | dcc.Slider(id='slider', min=0, max=10, step=1, value=5) |
dcc.Graph |
创建一个交互式图表（基于 Plotly.js）。 | dcc.Graph(id='graph', figure={'data': [{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar'}]}) |
dcc.Textarea |
创建一个多行文本输入框。 | dcc.Textarea(id='textarea', value='请输入多行文本...') |
dcc.Checklist |
创建一个复选框列表。 | dcc.Checklist(id='checklist', options=[{'label': '选项1', 'value': '1'}], value=['1']) |
dcc.RadioItems |
创建一个单选按钮组。 | dcc.RadioItems(id='radio', options=[{'label': '选项1', 'value': '1'}], value='1') |
dcc.DatePickerSingle |
创建一个日期选择器（单选）。 | dcc.DatePickerSingle(id='date-picker', date='2023-10-01') |
dcc.DatePickerRange |
创建一个日期范围选择器。 | dcc.DatePickerRange(id='date-range', start_date='2023-10-01', end_date='2023-10-07') |
dcc.Markdown |
渲染 Markdown 文本。 | dcc.Markdown('''# 标题\n- 列表项1''') |
dcc.Store |
在客户端存储数据，用于跨回调共享数据。 | dcc.Store(id='store', data={'key': 'value'}) |
dcc.Upload |
创建一个文件上传组件。 | dcc.Upload(id='upload', children=html.Div('拖放或点击上传文件')) |
dcc.Tabs |
创建选项卡组件。 | dcc.Tabs(id='tabs', children=[dcc.Tab(label='标签1', value='1')]) |
dcc.Tab |
创建单个选项卡（需与 dcc.Tabs 配合使用）。 |
dcc.Tab(label='标签1', value='1') |
dcc.Interval |
定时触发回调的组件。 | dcc.Interval(id='interval', interval=1000) |
dcc.Location |
用于管理 URL 的组件。 | dcc.Location(id='url', pathname='/') |
dcc.Link |
创建一个超链接，用于页面导航（需与 dcc.Location 配合使用）。 |
dcc.Link('跳转到首页', href='/') |
dcc.ConfirmDialog |
创建一个确认对话框。 | dcc.ConfirmDialog(id='confirm', message='确定要执行此操作吗？') |
dcc.ConfirmDialogProvider |
提供一个确认对话框（需与按钮等组件配合使用）。 | dcc.ConfirmDialogProvider(html.Button('删除'), id='confirm-provider') |
dcc.Loading |
创建一个加载动画组件。 | dcc.Loading(id='loading', children=[html.Div('加载中...')]) |
dcc.Download |
用于触发文件下载的组件。 | dcc.Download(id='download') |
应用实例
创建一个简单的 Dash 应用
以下是一个简单的 Dash 应用示例，展示了如何使用 dash.dcc 组件：
实例
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 定义应用的布局
app.layout = html.Div([
dcc.Input(id='input-text', type='text', value=''),
html.Div(id='output-text')
])
# 定义回调函数
@app.callback(
Output('output-text', 'children'),
[Input('input-text', 'value')]
)
def update_output(value):
return f'你输入的内容是: {value}'
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
from dash import dcc, html
from dash.dependencies import Input, Output
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 定义应用的布局
app.layout = html.Div([
dcc.Input(id='input-text', type='text', value=''),
html.Div(id='output-text')
])
# 定义回调函数
@app.callback(
Output('output-text', 'children'),
[Input('input-text', 'value')]
)
def update_output(value):
return f'你输入的内容是: {value}'
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
以上实例中，我们创建了一个简单的 Dash 应用，包含一个输入框和一个显示输入内容的区域。
当用户在输入框中输入内容时，应用会实时更新显示区域的内容。
使用 dcc.Graph 绘制图表
dcc.Graph 是 dash.dcc 中最常用的组件之一，用于绘制各种图表。
以下是一个使用 dcc.Graph 绘制折线图的示例：
实例
import dash
from dash import dcc, html
import plotly.express as px
import pandas as pd
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 创建示例数据
df = pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [10, 11, 12, 13, 14]
})
# 使用 Plotly Express 创建折线图
fig = px.line(df, x='x', y='y', title='示例折线图')
# 定义应用的布局
app.layout = html.Div([
dcc.Graph(figure=fig)
])
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
from dash import dcc, html
import plotly.express as px
import pandas as pd
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 创建示例数据
df = pd.DataFrame({
'x': [1, 2, 3, 4, 5],
'y': [10, 11, 12, 13, 14]
})
# 使用 Plotly Express 创建折线图
fig = px.line(df, x='x', y='y', title='示例折线图')
# 定义应用的布局
app.layout = html.Div([
dcc.Graph(figure=fig)
])
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
以上实例中，我们使用 plotly.express 创建了一个简单的折线图，并通过 dcc.Graph 组件将其显示在应用中。
使用 dcc.Dropdown 创建下拉菜单
dcc.Dropdown 组件允许用户从多个选项中选择一个。
以下是一个使用 dcc.Dropdown 的示例：
实例
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 定义应用的布局
app.layout = html.Div([
dcc.Dropdown(
id='dropdown',
options=[
{'label': '选项1', 'value': '1'},
{'label': '选项2', 'value': '2'},
{'label': '选项3', 'value': '3'}
],
value='1' # 默认选中的值
),
html.Div(id='dropdown-output')
])
# 定义回调函数
@app.callback(
Output('dropdown-output', 'children'),
[Input('dropdown', 'value')]
)
def update_output(value):
return f'你选择的是: {value}'
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
from dash import dcc, html
from dash.dependencies import Input, Output
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 定义应用的布局
app.layout = html.Div([
dcc.Dropdown(
id='dropdown',
options=[
{'label': '选项1', 'value': '1'},
{'label': '选项2', 'value': '2'},
{'label': '选项3', 'value': '3'}
],
value='1' # 默认选中的值
),
html.Div(id='dropdown-output')
])
# 定义回调函数
@app.callback(
Output('dropdown-output', 'children'),
[Input('dropdown', 'value')]
)
def update_output(value):
return f'你选择的是: {value}'
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
以上实例中，我们创建了一个下拉菜单，当用户选择一个选项时，应用会显示用户选择的内容。
dash.dcc 组件的常见属性和回调
dash.dcc 组件的属性非常丰富，每个组件都有其特定的属性。
以下是一些常见组件的属性：
dcc.Input：id：组件的唯一标识符。type：输入类型，如text、number等。value：输入框的当前值。
dcc.Dropdown：id：组件的唯一标识符。options：下拉菜单的选项列表，每个选项是一个字典，包含label和value。value：当前选中的值。
dcc.Graph：id：组件的唯一标识符。figure：要显示的图表对象，通常由plotly.express或plotly.graph_objects创建。
dcc.Slider：id：组件的唯一标识符。min：滑块的最小值。max：滑块的最大值。value：滑块的当前值。
回调函数
在 Dash 中，回调函数用于处理用户交互。回调函数通过 @app.callback 装饰器定义，并指定输入和输出组件。
以下是一个简单的回调函数示例：
实例
@app.callback(
Output('output-component', 'children'),
[Input('input-component', 'value')]
)
def update_output(value):
return f'你输入的内容是: {value}'
Output('output-component', 'children'),
[Input('input-component', 'value')]
)
def update_output(value):
return f'你输入的内容是: {value}'
以上实例中，回调函数 update_output 会在 input-component 的值发生变化时被调用，并将新的值传递给 output-component。
实际应用案例
dash.dcc 组件在实际项目中有广泛的应用。以下是一个实际应用案例，展示了如何使用 dash.dcc 组件构建一个交互式数据可视化应用。
交互式数据可视化应用
假设我们有一个数据集，包含不同城市的温度和湿度数据。我们可以使用 dash.dcc 组件构建一个交互式应用，允许用户选择城市并查看相应的温度和湿度图表。
实例
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 创建示例数据
df = pd.DataFrame({
'城市': ['北京', '上海', '广州', '深圳'],
'温度': [20, 25, 30, 28],
'湿度': [50, 60, 70, 65]
})
# 定义应用的布局
app.layout = html.Div([
dcc.Dropdown(
id='city-dropdown',
options=[{'label': city, 'value': city} for city in df['城市']],
value='北京' # 默认选中的城市
),
dcc.Graph(id='temperature-graph'),
dcc.Graph(id='humidity-graph')
])
# 定义回调函数
@app.callback(
[Output('temperature-graph', 'figure'),
Output('humidity-graph', 'figure')],
[Input('city-dropdown', 'value')]
)
def update_graphs(selected_city):
filtered_df = df[df['城市'] == selected_city]
temperature_fig = px.bar(filtered_df, x='城市', y='温度', title='温度')
humidity_fig = px.bar(filtered_df, x='城市', y='湿度', title='湿度')
return temperature_fig, humidity_fig
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
# 创建一个 Dash 应用
app = dash.Dash(__name__)
# 创建示例数据
df = pd.DataFrame({
'城市': ['北京', '上海', '广州', '深圳'],
'温度': [20, 25, 30, 28],
'湿度': [50, 60, 70, 65]
})
# 定义应用的布局
app.layout = html.Div([
dcc.Dropdown(
id='city-dropdown',
options=[{'label': city, 'value': city} for city in df['城市']],
value='北京' # 默认选中的城市
),
dcc.Graph(id='temperature-graph'),
dcc.Graph(id='humidity-graph')
])
# 定义回调函数
@app.callback(
[Output('temperature-graph', 'figure'),
Output('humidity-graph', 'figure')],
[Input('city-dropdown', 'value')]
)
def update_graphs(selected_city):
filtered_df = df[df['城市'] == selected_city]
temperature_fig = px.bar(filtered_df, x='城市', y='温度', title='温度')
humidity_fig = px.bar(filtered_df, x='城市', y='湿度', title='湿度')
return temperature_fig, humidity_fig
# 运行应用
if __name__ == '__main__':
app.run_server(debug=True)
以上实例中，用户可以通过下拉菜单选择城市，应用会根据用户的选择更新温度和湿度的柱状图。
