【Dash系列】Python的Web可視化框架Dash(1)---簡介
【Dash系列】Python的Web可視化框架Dash(2)---安裝
【Dash系列】Python的Web可視化框架Dash(3)---布局設(shè)置
【Dash系列】Python的Web可視化框架Dash(4)---基本回調(diào)
【Dash系列】Python的Web可視化框架Dash(5)---狀態(tài)和預(yù)更新
【Dash系列】Python的Web可視化框架Dash(6)---交互和過濾
【Dash系列】Python的Web可視化框架Dash(7)---回調(diào)共享
【Dash系列】Python的Web可視化框架Dash(8)---核心組件
本節(jié)介紹如何實現(xiàn)Dash應(yīng)用的回調(diào)，先導(dǎo)入本節(jié)用到的所有包
import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc # 交互式組件
import dash_html_components as html # 代碼轉(zhuǎn)html
from dash.dependencies import Input, Output # 回調(diào)
from jupyter_plotly_dash import JupyterDash # Jupyter中的Dash
一、基本回調(diào)
(一) 代碼
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
(二)效果圖
(三)說明
- 本例中，當(dāng)輸入框中輸入的值發(fā)生變化時铅忿，對應(yīng)的文字顯示會同步變化；
- dash.dependencies.Input的屬性變化，會激活回調(diào)函數(shù)斑唬，進(jìn)行數(shù)據(jù)更新，如效果圖黎泣；
二恕刘、State回調(diào)
(一) 代碼
# 設(shè)置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 = '點(diǎn)擊按鈕'),
html.Div(id = 'output-state')
])
# 回調(diào)
@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"""已經(jīng)點(diǎn)擊了{(lán)n_clicks}次按鈕，第一個輸入項是{input01}抒倚，第二個輸入項是{input02}"""
app
(二)效果圖
(三)說明
- dash.dependencies.State 允許傳遞額外值而不激活回調(diào)函數(shù)褐着。對比第一個基本回調(diào)的示例，本例中只是將dcc.Input 替換為 dash.dependencies.State 托呕，將按鈕替換為dash.dependencies.Input含蓉；
- 示例中，改變dcc.Input文本框中的文本不會激活回調(diào)函數(shù)项郊，點(diǎn)擊提交按鈕才會激活回調(diào)函數(shù)馅扣。需要注意，即使不會激活回調(diào)函數(shù)本身着降，但dcc.Input的現(xiàn)值依然會傳遞給回調(diào)函數(shù)差油；
- 觸發(fā)回調(diào)是通過html.Button組件的n_clicks屬性實現(xiàn)的，每次單擊組件時鹊碍，n_clicks都會增加厌殉，這個功能適用dash_html_components庫里的所有組件；
三侈咕、不顯示回調(diào)結(jié)果
(一) 代碼
app = JupyterDash('Prevent_id', height=50)
app.layout = html.Div([
html.Button('點(diǎn)擊查看內(nèi)容', 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 '防止回調(diào)公罕，更新數(shù)據(jù)'
app
(二)效果圖
(三)說明
- 當(dāng)不希望更新回調(diào)的輸出結(jié)果時，可以通過 PreventUpdate 在回調(diào)函數(shù)中引發(fā)Exception 來實現(xiàn)此目的耀销；
四楼眷、其它
- dash.no_update可以實現(xiàn)部分更新輸出，按官方文檔目前沒有實現(xiàn)熊尉；
- 從dash>=0.36.0rc1版本后罐柳，支持單個調(diào)用中有多個輸出，按官方文檔目前并沒有實現(xiàn)(此處有捂臉狰住。张吉。。催植。有待后續(xù)更新)肮蛹。
