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

2024-08-21 10:12

本文主要是介绍【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.Div html.Ul,你可以用它来动态添加或修改内部的 HTML 元素。
import dash
from dash import html
from dash.dependencies import Input, Outputapp = 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 会自动更新图表的显示。
import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as pxapp = 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 样式。你可以指定样式字典来改变组件的外观。
import dash
from dash import html
from dash.dependencies import Input, Outputapp = 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 插件。
import dash
from dash import html
from dash.dependencies import Input, Outputapp = 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
import dash
from dash import dcc, html
from dash.dependencies import Input, Outputapp = 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
import dash
from dash import dcc, html
from dash.dependencies import Input, Outputapp = 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 optionsif __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

这篇关于【Dash】Dash中@callback() 回调函数的Output() 参数的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1092870

相关文章

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Linux内核参数配置与验证详细指南

《Linux内核参数配置与验证详细指南》在Linux系统运维和性能优化中,内核参数(sysctl)的配置至关重要,本文主要来聊聊如何配置与验证这些Linux内核参数,希望对大家有一定的帮助... 目录1. 引言2. 内核参数的作用3. 如何设置内核参数3.1 临时设置(重启失效)3.2 永久设置(重启仍生效

基于Java实现回调监听工具类

《基于Java实现回调监听工具类》这篇文章主要为大家详细介绍了如何基于Java实现一个回调监听工具类,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录监听接口类 Listenable实际用法打印结果首先,会用到 函数式接口 Consumer, 通过这个可以解耦回调方法,下面先写一个

SpringMVC获取请求参数的方法

《SpringMVC获取请求参数的方法》:本文主要介绍SpringMVC获取请求参数的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下... 目录1、通过ServletAPI获取2、通过控制器方法的形参获取请求参数3、@RequestParam4、@

shell编程之函数与数组的使用详解

《shell编程之函数与数组的使用详解》:本文主要介绍shell编程之函数与数组的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录shell函数函数的用法俩个数求和系统资源监控并报警函数函数变量的作用范围函数的参数递归函数shell数组获取数组的长度读取某下的

MySQL高级查询之JOIN、子查询、窗口函数实际案例

《MySQL高级查询之JOIN、子查询、窗口函数实际案例》:本文主要介绍MySQL高级查询之JOIN、子查询、窗口函数实际案例的相关资料,JOIN用于多表关联查询,子查询用于数据筛选和过滤,窗口函... 目录前言1. JOIN(连接查询)1.1 内连接(INNER JOIN)1.2 左连接(LEFT JOI

MySQL中FIND_IN_SET函数与INSTR函数用法解析

《MySQL中FIND_IN_SET函数与INSTR函数用法解析》:本文主要介绍MySQL中FIND_IN_SET函数与INSTR函数用法解析,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一... 目录一、功能定义与语法1、FIND_IN_SET函数2、INSTR函数二、本质区别对比三、实际场景案例分

Spring Boot项目部署命令java -jar的各种参数及作用详解

《SpringBoot项目部署命令java-jar的各种参数及作用详解》:本文主要介绍SpringBoot项目部署命令java-jar的各种参数及作用的相关资料,包括设置内存大小、垃圾回收... 目录前言一、基础命令结构二、常见的 Java 命令参数1. 设置内存大小2. 配置垃圾回收器3. 配置线程栈大小

C++ Sort函数使用场景分析

《C++Sort函数使用场景分析》sort函数是algorithm库下的一个函数,sort函数是不稳定的,即大小相同的元素在排序后相对顺序可能发生改变,如果某些场景需要保持相同元素间的相对顺序,可使... 目录C++ Sort函数详解一、sort函数调用的两种方式二、sort函数使用场景三、sort函数排序