Dash⑥（コールバック）

コールバックを使うと、Dashアプリケーションに対して動的な変更を行うことができます。

前回記事で作成したアプリケーションにコールバックを追加して、ドロップダウンで選択された色に背景色を変更してみます。

コールバック

Dashでコールバックを設定するには、Dash.callbackデコレータでデコレートしたコールバック関数を定義します。（37～42行目）

コールバックの設定手順は下記の通りです。

  1. コールバック用のimport文追加。
  2. 入出力のコンポーネントにID追加。
  3. コールバック関数の定義。
    デコレータに対してコールバック関数の出力先と入力を指定。（ID名と属性名を指定）
    コールバックは入力要素の指定された属性が変化するたびに呼び出されます。

今回定義したコールバック関数は、ドロップダウンで選択された色を背景色のcssプロパティに格納します。

[ソースコード]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
from dash.dependencies import Input, Output     # 1. import追加

app = dash.Dash(__name__)           # Dashインスタンスを生成

# 横幅を80%、中央寄せにし、上下に5%の余白
core_style = {'width':'80%', 'margin':'5% auto'}

app.layout = html.Div(
    [
        # 見出し
        html.H1('こんにちは、Dash', style={'textAlign':'center'}),
        # ドロップダウン
        dcc.Dropdown(
            id='dropdown',      # 2. ID名を追加
            options=[
                {'label':'white',  'value':'white'},
                {'label':'yellow', 'value':'yellow'}
            ],
            value='white',
            style=core_style
        ),
        # グラフ
        dcc.Graph(
            figure = px.bar(x=[1, 2, 3, 4, 5],
                            y=[3, 4, 2, 5, 1]),
            style=core_style
        )
    ],
    id='all-components'        # 2. ID名を追加
)

# 3. コールバックを定義
@app.callback(
    Output('all-components', 'style'),  # 戻り値の出力先を設定
    Input('dropdown', 'value')          # コールバックの呼び出し要素を指定
)
def update_background(selected_value):
    return {'backgroundColor':selected_value, 'padding':'3%'}   # 返り値

if __name__ == '__main__':
    app.run_server(debug=True)      # アプリケーションを起動

上記ソースを実行すると、コンソールにURLが表示されるのでブラウザで表示します。

[ブラウザで表示]

ドロップボックスで色を選択すると、その色で背景色が変わるようになりました。