【Dash】Dash中@callback() 回调函数的Output() 参数

一、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.Divhtml.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.Inputdcc.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.Tabsdcc.Accordion

8、'selectedData'

  • 用于更新图表组件 选中的数据点,如 dcc.Graph

9、'src'

  • 用于更新图片或视频组件的源,如 html.Imghtml.Video

10、'data'

  • 用于更新图表或数据表组件的数据,如 dcc.Graphdash_table.DataTable

11、'columns'

  • 用于更新数据表组件的列配置,如 dash_table.DataTable
相关推荐
RestCloud10 小时前
如何理解ETLCloud在iPaas中的关键角色
etl·数据可视化·数据集成·数据传输·ipaas·集成工具
B站计算机毕业设计超人1 天前
计算机毕业设计Hadoop+PySpark深度学习游戏推荐系统 游戏可视化 游戏数据分析 游戏爬虫 Scrapy 机器学习 人工智能 大数据毕设
大数据·人工智能·爬虫·spark·课程设计·数据可视化·推荐算法
李恒-聆机智能专精数采1 天前
从零开始了解数采(十二)——汽车锂电池板自动装配线数据采集方案
大数据·数据挖掘·云计算·汽车·边缘计算·制造·数据可视化
界面开发小八哥2 天前
「实战应用」如何用图表控件LightningChart .NET在WPF中制作表格?(一)
.net·wpf·数据可视化·图表控件·图表·lightningchart
希艾席蒂恩2 天前
探索四款强大的免费报表工具,提升数据可视化能力
前端·数据库·信息可视化·统计·报表·数据可视化
费弗里2 天前
Dash 2.18.2版本更新:模式匹配回调性能大提升
python·dash
安冬的码畜日常3 天前
【D3.js in Action 3 精译_039】4.3 D3 面积图的绘制方法及其边界标签的添加
前端·javascript·数据可视化·d3.js·d3面积图
GarsonW5 天前
R使用ggplot实现基础数据可视化
信息可视化·数据挖掘·数据分析·数据可视化·r
纳贤猫NXM.COM7 天前
从0到1,解读安卓ASO优化!
android·python·django·flask·dubbo·tornado·dash
孙_华鹏7 天前
threejs——实战中材质的应用
前端·three.js·数据可视化