Python Dash（三）

一、学习内容

学习如何在dash中实现动态交互元素

二、学习过程

1. 相关库

在dash中，有关于动态交互的元素被封装在“dash_core_components”，在程序中引入方法如下：

import dash_core_components as dcc

2. 通过官方文档代码进行学习（Part 3. Basic Callbacks | Dash for Python Documentation | Plotly）

学习官方文档中的案例并将代码中装饰器部分改写。

# author : 高冷男孩不吃苹果

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

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H6("Change the value in the text box to see callbacks in action!"),
    #设置数据流向：输入—>输出
    #输入框
    html.Div([
        "Input: ",
        dcc.Input(id='my-input', value='initial value', type='text')
    ]),
    html.Br(),
    #输出框
    html.Div(id='my-output'),

])

#装饰器，其本质是函数的加工，f1()-->加工-->f2()
# （第一种写法）
# @app.callback(
#     Output(component_id='my-output', component_property='children'),
#     Input(component_id='my-input', component_property='value')
# )
#
# def update_output_div(input_value):
#     return 'Output: {}'.format(input_value) #输出格式为“Output: '输入信息'”

#（第二种写法）
def f1(input_value):
    return 'Output: {}'.format(input_value) #输出格式为“Output: '输入信息'”

data_processing = app.callback(
    Output(component_id='my-output', component_property='children'),
    Input(component_id='my-input', component_property='value')
)

data_processing(f1)


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

三、运行结果