Dash㉔(レイアウトごとのコールバック グラフ編)

レイアウトごとのコールバック(グラフ)

前回記事では、リンクをクリックすると画面遷移を行うアプリケーションを作成しました。

今回は、画面遷移先のページのグラフにコールバックを追加します。

ポイントは10行目のsuppress_callback_exceptionsです。

Dashはアプリケーション起動時に、コールバックで使われるIDとレイアウトに存在するIDを確認し、一致しない場合は例外が発生してしまいます。

これを回避するためsuppress_callback_exceptionsTrueを設定します。

[ソースコード]

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import plotly.graph_objects as go
from dash.dependencies import Input, Output

iris = px.data.iris() # データの読み込み

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

app.layout = html.Div(
[
dcc.Location(id='location1'),
html.Br(),
dcc.Link('home', href='/'),
html.Br(),
dcc.Link('/graph', href='/graph'),
html.Br(),
html.Div(
id='div1',
style={'fontSize':'40', 'textAlign':'center', 'height':350}
)
],
style={'fontSize':'40', 'textAlign':'center'}
)

# ページごとのコンテンツ作成
home = html.H1('irisデータ')

# グラフ用
graph = html.Div(
[
html.Div(
[
html.Div(
[
html.P('X軸:'),
dcc.RadioItems(
id='radio_x',
options=[
{'label':col, 'value':col} for col in iris.columns[:4]
],
value='sepal_width'
)
],
style={'display':'inline-block'}
),
html.Div(
[
html.P('Y軸:'),
dcc.RadioItems(
id='radio_y',
options=[
{'label':col, 'value':col} for col in iris.columns[:4]
],
value='sepal_width'
)
],
style={'display':'inline-block'}
)
]
),
dcc.Graph(id='graph1')
]
)

# テーブル用
table = html.Div(
[
html.Div(
[
dcc.Dropdown(
id='dropdown1',
options=[{'valuel':col, 'label':col} for col in iris.columns],
multi=True,
value=['sepal_length', 'sepal_width']
)
],
style={'width':'60%', 'margin':'auto'}
),
dcc.Graph(id='table1')
]
)

# ページ切替用コールバック
@app.callback(
Output('div1', 'children'),
Input('location1', 'pathname')
)
def update_location(pathname):
# pathnameごとにコンテンツを返す
if pathname == '/graph':
return graph
else:
return home

# グラフ更新用コールバック
@app.callback(
Output('graph1', 'figure'),
Input('radio_x', 'value'),
Input('radio_y', 'value')
)
def update_graph(selected_x, selected_y):
return px.scatter(
iris,
x=selected_x,
y=selected_y,
color='species',
marginal_x='box',
marginal_y='violin',
title='irisグラフ'
)

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

[ブラウザで表示]

グラフ画面に遷移した後に、ラジオボタンを選択すると散布図バイオリン図のデータを変更することができます。