【数据科学系列】基于Python的Web应用框架Dash-回调函数

最新推荐文章于 2025-06-07 10:16:41 发布

原创

最新推荐文章于 2025-06-07 10:16:41 发布 · 1.3k 阅读

7 ·

CC 4.0 BY-SA版权

基本的Dash回调

回调：Dash应用程序具有交互性

Dash应用布局

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Input(id='my-id', value=u'初始值', type='text'),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


if __name__ == '__main__':
    app.run_server(debug=True)

在文本框中输入内容，输出组件的子项随之立即更新。让我们分解这里发生的事情：

应用程序接口的“输入”和“输出”通过app.callback装饰器以声明方式描述。
在Dash中，我们的应用程序的输入和输出只是特定组件的属性。在此示例中，我们的输入是具有ID“ my-id” 的组件的“value”属性。我们的输出是具有ID“ my-div” 的组件的“children”属性。
每当输入属性发生更改时，将自动调用回调装饰器包装的函数。Dash为函数提供输入属性的新值作为输入参数，Dash使用函数返回的内容更新输出组件的属性。

不要将dash.dependencies.Input对象与 dash_core_components.Input对象混淆。前者仅用于这些回调，后者是实际组件。

Dash设置组件属性值的过程
当Dash应用程序启动时，它会自动使用输入组件的初始值调用所有回调，以填充输出组件的初始状态。在这个例子中，如果你指定了类似的东西html.Div(id=‘my-div’, children=‘Hello world’) ，它会在应用程序启动时被覆盖。

类似使用Microsoft Excel进行编程：每当输入单元格发生更改时，依赖于该单元格的所有单元格都将自动更新。这称为“反应式编程”（Reactive Programming）。

还记得每个组件是如何通过其关键字参数集完全描述的吗？那些属性现在很重要。通过Dash交互，我们可以通过回调函数动态更新任何这些属性。我们经常会更新该组件的children属性来显示新文本或dcc.Graph组成部分figure，以显示新的数据，但我们也可以更新style的组件，甚至可用一个的dcc.Dropdown的分量options！

dcc.Slider 更新 dcc.Graph

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

import pandas as pd
import plotly.graph_objs as go

df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly/'
    'datasets/master/gapminderDataFiveYear.csv')

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='year-slider',
        min=df['year'].min(),
        max=df['year'].max()