【Dash系列】Python的Web可视化框架Dash(1)---简介
【Dash系列】Python的Web可视化框架Dash(2)---安装
【Dash系列】Python的Web可视化框架Dash(3)---布局设置
【Dash系列】Python的Web可视化框架Dash(4)---基本回调
【Dash系列】Python的Web可视化框架Dash(5)---状态和预更新
【Dash系列】Python的Web可视化框架Dash(6)---交互和过滤
【Dash系列】Python的Web可视化框架Dash(7)---回调共享
【Dash系列】Python的Web可视化框架Dash(8)---核心组件
本节介绍如何实现Dash应用的回调，先导入本节用到的所有包
import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc # 交互式组件
import dash_html_components as html # 代码转html
from dash.dependencies import Input, Output # 回调
from jupyter_plotly_dash import JupyterDash # Jupyter中的Dash
一、基本回调
(一) 代码
app = JupyterDash('State_id', height = 50)
app.layout = html.Div([
dcc.Input(id = 'input-01', type = 'text', value = '中国'),
dcc.Input(id = 'input-02', type = 'text', value = '北京'),
html.Div(id = 'input-many')
])
@app.callback(Output('input-many', 'children'),
[Input('input-01', 'value'), Input('input-02', 'value')])
def update_input(input01, input02):
return f"""第一个输入项{input01}，第二个输入项{input02}"""
app
(二)效果图
(三)说明
- 本例中，当输入框中输入的值发生变化时，对应的文字显示会同步变化；
- dash.dependencies.Input的属性变化，会激活回调函数，进行数据更新，如效果图；
二、State回调
(一) 代码
# 设置Dash
app = JupyterDash('State_id', height = 60)
app.layout = html.Div([
dcc.Input(id = 'input01-state', type = 'text', value = '中国'),
dcc.Input(id = 'input02-state', type = 'text', value = '北京'),
html.Button(id = 'submit-button', n_clicks = 0, children = '点击按钮'),
html.Div(id = 'output-state')
])
# 回调
@app.callback(Output('output-state', 'children'),
[Input('submit-button', 'n_clicks')],
[State('input01-state', 'value'),
State('input02-state', 'value')])
def update_output(n_clicks, input01, input02):
return f"""已经点击了{n_clicks}次按钮，第一个输入项是{input01}，第二个输入项是{input02}"""
app
(二)效果图
(三)说明
- dash.dependencies.State 允许传递额外值而不激活回调函数。对比第一个基本回调的示例，本例中只是将dcc.Input 替换为 dash.dependencies.State ，将按钮替换为dash.dependencies.Input；
- 示例中，改变dcc.Input文本框中的文本不会激活回调函数，点击提交按钮才会激活回调函数。需要注意，即使不会激活回调函数本身，但dcc.Input的现值依然会传递给回调函数；
- 触发回调是通过html.Button组件的n_clicks属性实现的，每次单击组件时，n_clicks都会增加，这个功能适用dash_html_components库里的所有组件；
三、不显示回调结果
(一) 代码
app = JupyterDash('Prevent_id', height=50)
app.layout = html.Div([
html.Button('点击查看内容', id = 'button_id'),
html.Div(id = 'body-div')
])
@app.callback(Output(component_id = 'body-div', component_property = 'children'),
[Input(component_id = 'button_id', component_property = 'n_clicks')])
def update_output(n_clicks):
if n_clicks is None:
raise PreventUpdate
else:
return '防止回调，更新数据'
app
(二)效果图
(三)说明
- 当不希望更新回调的输出结果时，可以通过 PreventUpdate 在回调函数中引发Exception 来实现此目的；
四、其它
- dash.no_update可以实现部分更新输出，按官方文档目前没有实现；
- 从dash>=0.36.0rc1版本后，支持单个调用中有多个输出，按官方文档目前并没有实现(此处有捂脸。。。。有待后续更新)。
