Dash Python 教程(4): 使用回调函数实现界面交互

前面我们使用dash_html_components和dash_core_components构造了用户界面,但没有添加任何用户互动。

Dash中是通过回调函数(callback)来实现用户界面用户的。

from dash.dependencies import Input, Output

dash.dependencies 定义了Input,和Output 代表输入和输出,这里的Input和dash_html_components里的Input是不一样的。
dash_html_components里的Input为一文本输入框。而dash.dependencies里的Input,Output用来描述用户界面交互的回调函数。

我们先看一个简单的例子

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', 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)

 

可以试着在文本框中输入字符,可以看到下面的字符跟着变换。

Dash 中,输入输出代表了UI组件的某些属性,在本例中,输入为文本框的value属性,而输出为div的children属性。当输入属性发生变化时,Dash会调用由@app.callback修饰过的函数,如本例update_output_div。 函数的参数为输入文本框的value属性。而函数的输出用来设置输出UI部件对应的属性。component_id和component_property的参数名称是可以省略的。每个UI组件需要指定id来标明。

下面在看一个稍微复杂些的回调函数,用户可以通过拉动Slider来选择显示某一年GDP的图像:

本例的输入为Slider的value属性,而输出为Graph的figure 属性。Figure的transition = {‘duration’: 500},表示动画转换不同年份GDP。