一、Dash 中的 @callback()
在Python中,@callback是一个用于注册回调函数的装饰器
Dash 的回调机制允许开发者创建交互式的Web应用,通过回调函数可以实现前端界面与后端逻辑的交互。
二、@callback() 的概念、定义和应用场景
概念
- @callback 是 Dash 框架中的一个装饰器,用于将一个普通函数转变成一个回调函数,这个函数可以响应 Dash 应用中的用户交互。
定义
- @callback 常与 Output 和 Input 类一起使用,定义了当输入组件的值发生变化时,哪个前端组件应该更新,以及如何更新。
应用场景
- 需要根据用户输入、点击等交互更新前端显示的情况时使用。
- 例如,当用户调整滑块时更新图表,或者在用户输入文本后显示结果。
三、@callback() 中 的常用类
- Input():用于指定触发回调的组件和属性。例如:Input('component-id', 'property') 表示当指定组件的属性发生变化时,回调函数将被触发。
- Output():用于指定回调函数的结果将更新到哪个组件的哪个属性。例如:Output('component-id', 'property') 表示回调函数的返回值将用来更新指定组件的属性。
- State():用于在回调函数中提供额外的输入值,但它本身的变化不会触发回调。这个可以用于传递组件的当前状态,而不需要更新触发回调函数。
四、@callback() 中的 Output() 有哪些参数?
1、'children'
- 用于更新组件的子元素。这通常用于容器组件,如html.Div或html.Ul,你可以用它来动态添加或修改内部的HTML元素。
python
import dash
from dash import html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Button('Add Test', id='add-text-button', n_clicks=0),
html.Div(id='text-container')
])
@app.callback(
Output('text-container', 'children'),
[Input('add-text-button', 'n_clicks')]
)
def add_text(n_clicks):
if n_clicks:
return [html.P(f'This is text {i}') for i in range(n_clicks)]
if __name__ == '__main__':
app.run_server(debug=True)
2、'figure'
- 用于更新图表组件 的内容,如dcc.Graph 。这个属性允许你传递图表的数据和配置,Dash会自动更新图表的显示。
python
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
app = dash.Dash(__name__)
# 定义应用布局
app.layout = html.Div([
# 添加 dcc.Location 组件来捕获 URL 的路径
dcc.Location(id='url', refresh=False),
# 定义一个 Graph 组件来显示图表
dcc.Graph(id='example-graph')
])
# 回调函数,根据 URL 路径更新图表
@app.callback(
Output('example-graph', 'figure'),
[Input('url', 'pathname')]
)
def update_graph(pathname):
# 获取鸢尾花数据集
df = px.data.iris()
# 根据 pathname 来决定图表的数据和类型
if pathname:
# 假设 pathname 是 'sepal_length', 'sepal_widdth', 'petal_length', 'petal_width' 中的一个
# 去除 pathname 前后的斜杠
column_name = pathname.strip('/')
if column_name in df.columns:
fig = px.box(df, y=column_name)
return fig
# 如果 pathname 不匹配任何列,返回一个空的图表
column_list = 'url可拼接:' + ','.join(df.columns)
return {'data': [],
'layout': {'title': f'No Data<br>{column_list}'}} # 返回空图表
# 运行服务器
if __name__ == '__main__':
app.run_server(debug=True)
3、'style'
- 用于更新组件的 CSS 样式。你可以指定样式字典来改变组件的外观。
python
import dash
from dash import html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Button('Change Style', id='change-style-button', n_clicks=0)
@app.callback(
Output('change-style-button', 'style'),
[Input('change-style-button', 'n_clicks')]
)
def change_style(n_clicks):
if n_clicks % 2 == 1:
return {'color': 'white', 'background-color': 'blue'}
else:
return {'color': 'black', 'background-color': 'lightgray'}
if __name__ == '__main__':
app.run_server(debug=True)
4、'className'
- 用于更新组件的CSS 类名。这可以用于应用预定义的CSS 样式或 JavaScript插件。
python
import dash
from dash import html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
html.Button('Change Class', id='change-class-button', n_clicks=0),
html.Div('Content', id='content-div'),
html.Div(id='class-name-display')
])
@app.callback(
Output('content-div', 'className'),
[Input('change-class-button', 'n_clicks')]
)
def change_class(n_clicks):
if n_clicks % 2 == 0:
return 'new-class-a'
else:
return 'new-class-b'
@app.callback(
Output('class-name-display', 'children'),
[Input('content-div', 'className')]
)
def display_class_name(className):
return f'The current class name is: {className}'
if __name__ == '__main__':
app.run_server(debug=True)
5、'value'
- 用于更新输入组件 的值,如dcc.Input 或 dcc.Dropdown。
python
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
dcc.Input(id='input-field', value='Initial Value')
])
@app.callback(
Output('input-field', 'value'),
[Input('url', 'pathname')]
)
def update_input_value(pathname):
return pathname if pathname else 'No Path Provided'
if __name__ == '__main__':
app.run_server(debug=True)
6、'options'
- 用于更新下拉列表组件 的选项,如 dcc.Dropdown。
python
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
app.layout = html.Div([
dcc.Location(id='url', refresh=False),
dcc.Dropdown(id='my-dropdown')
])
@app.callback(
Output('my-dropdown', 'options'),
[Input('url', 'pathname')]
)
def update_dropdown_options(pathname):
if pathname:
options = [{'label': f'Option {i}', 'value': f'{i}'} for i in range(1,6)]
return options
if __name__ == '__main__':
app.run_server(debug=True)
7、'active'
- 用于更新选项卡或手风琴组件的当前活动项,如dcc.Tabs或 dcc.Accordion。
8、'selectedData'
- 用于更新图表组件 选中的数据点,如 dcc.Graph。
9、'src'
- 用于更新图片或视频组件的源,如 html.Img或html.Video。
10、'data'
- 用于更新图表或数据表组件的数据,如 dcc.Graph 或 dash_table.DataTable。
11、'columns'
- 用于更新数据表组件的列配置,如 dash_table.DataTable。