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)

以上实例中，我们创建了一个简单的 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)

以上实例中，我们使用 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)

以上实例中，我们创建了一个下拉菜单，当用户选择一个选项时，应用会显示用户选择的内容。

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}'

以上实例中，回调函数 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)

以上实例中，用户可以通过下拉菜单选择城市，应用会根据用户的选择更新温度和湿度的柱状图。