Dash㉑（パターンマッチング・コールバック／ALLSMALLERセレクタ）

ALLSMALLERセレクタ

ALLSMALLERセレクタを使うと、属性”type”の値が同じ かつ 属性”index”の値が小さい 全てのコンポーネントの属性値をコールバック関数で利用することができます

[ソースコード]

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
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, State, MATCH, ALLSMALLER

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

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

app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[])
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('div1', 'children'),
    Input('button1', 'n_clicks'),
    State('div1', 'children'),
    prevent_initial_calll=True
)
def update_layouth(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'dropdown1', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            ),
            html.P(id={'type':'text_show', 'index':n_clicks})
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'text_show', 'index':MATCH}, 'children'),
#    Input({'type': 'dropdown1', 'index':MATCH}, 'value')
    Input({'type': 'dropdown1', 'index':ALLSMALLER}, 'value')   # MATCHセレクタをALLSMALLERセレクタに変更
)
def update_graph(selected_values):
    return str(selected_values)

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

２つ目のコールバック関数(update_graph)のInputでALLSMALLERセレクタを指定しています。

Pコンポーネントの属性”index”よりも小さな値を持つドロップダウンのvalue属性の値が、リストに格納されPコンポーネントに表示されます。

[ブラウザで表示]

ボタンを押すたびにドロップダウンとリストの内容を表示するPコンポーネントが追加され、自身よりも上部に表示されている（つまり属性indexの値が小さい）ドロップダウンの値が全て表示されていることを確認できます。

Dash⑳（パターンマッチング・コールバック／MATCHセレクタ その２）

MATCHセレクタでグラフ表示

MATCHセレクタを使って、ボタンをクリックすると２つドロップダウンとグラフが追加されるアプリケーションを作成します。

ドロップダウンで選択した国名と項目をそれぞれのグラフに表示します。

[ソースコード]

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
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, State, MATCH

gapminder = px.data.gapminder()   # データの読み込み
# コンポーネントを横に並べるためのスタイル
half_style = {'width':'50%', 'display':'inline-block'}

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

app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[])
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('div1', 'children'),
    Input('button1', 'n_clicks'),
    State('div1', 'children'),
    prevent_initial_calll=True
)
def update_layout(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'dropdown1', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            ),
            dcc.Dropdown(
                id={'type':'dropdown2', 'index':n_clicks},
                options=[
                    {'label':col, 'value':col} for col in gapminder.columns[3:6]
                ],
                value="lifeExp"
            ),
            dcc.Graph(id={'type':'graph1', 'index':n_clicks})
        ],
        style=half_style
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'graph1',    'index':MATCH}, 'figure'),
    Input({'type': 'dropdown1', 'index':MATCH}, 'value'),
    Input({'type': 'dropdown2', 'index':MATCH}, 'value')
)
def update_graph(selected_values, selected_col):
    gap = gapminder[gapminder['country'] == selected_values]
    return px.line(gap, x='year', y=selected_col)

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

１つ目のコールバック(update_layout関数)では、ボタンをクリックすると２つのドロップダウンとグラフを追加します。

２つ目のコールバック(update_graph関数)では、ドロップダウンの国名または項目を選択すると、選択された国名と項目の折れ線グラフを返します。

出力項目、入力項目の指定ではIDキー”index”にMATCHが設定されているため、IDキー”index”が同じコンポーネントのみにコールバックが適用されます。

[ブラウザで表示]

ボタンを押すごとに、ドロップダウンとグラフがそれぞれ追加され、ドロップダウンの選択に応じて折れ線グラフが変化することを確認できます。

Dash⑲（パターンマッチング・コールバック／MATCHセレクタ）

MATCHセレクタ

MATCHセレクタを使うと、IDキー”index”の値が一致するコンポーネントにして、コールバックを適用することができます。

gapminderデータセットを使って国名のドロップダウンをUIに追加し、その値を出力するアプリケーションを作成し、MATCHセレクタの動作を確認してみます。

[ソースコード]

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
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, State, MATCH, ALLSMALLER

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

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

# レイアウト
app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[])
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('div1', 'children'),
    Input('button1', 'n_clicks'),
    State('div1', 'children'),
    prevent_initial_calll=True
)
def update_layouth(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'dropdown1', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            ),
            html.P(id={'type':'text_show', 'index':n_clicks})
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output({'type':'text_show', 'index':MATCH}, 'children'),
    Input({'type': 'dropdown1', 'index':MATCH}, 'value')
)
def update_graph(selected_values):
    return str(selected_values)

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

レイアウトには、ボタンと新たなコンポーネントを追加するためのDivコンポーネントを配置します。

１つ目のコールバック(update_layout関数)では、ボタンがクリックされるとドロップダウンとＰコンポーネントを追加します。

２つ目のコールバック(update_graph関数)では、入力項目と出力項目の指定IDキー”index”にMATCHを設定します。

こうすることでIDキー”index”に渡された値が同じもの同士に、コールバックが適用されドロップダウンで選択された値がそれぞれ表示されます。

[ブラウザで表示]

ボタンを押すたびに、ドロップダウンとＰコンポーネントが追加され、ドロップダウンの選択値がそれそれのＰコンポーネントに表示されることが確認できます。

Dash⑱（パターンマッチング・コールバック／ALLセレクタ その２）

ALLセレクタでグラフ表示

前回記事では、ALLセレクタを使って複数のコンポーネントの選択値をまとめて取得することができました。

今回は、選択した複数の選択値を折れ線グラフに反映します。

[ソースコード]

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
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, State, ALL

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

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

app.layout = html.Div(
    [
        html.Button('Push', id='button1', n_clicks=0),
        html.Div(id='div1', children=[]),
        html.Div(id='select1', children=[]),
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('div1', 'children'),
    Input('button1', 'n_clicks'),
    State('div1', 'children'),
    prevent_initial_calll=True
)
def update_layouth(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'dropdown1', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            )
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output('select1', 'children'),
    Input({'type': 'dropdown1', 'index':ALL}, 'value'),
    prevent_initial_calll=True
)
def update_graph(selected_values):
    # 全てのドロップダウンで選択された国のデータを作成し、可視化する。
    selected_countries = gapminder[gapminder["country"].isin(selected_values)]
    return dcc.Graph(
        figure=px.line(selected_countries, x='year', y='lifeExp', color='country')
    )

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

２つめのコールバック関数(update_graph)で、各ドロップダウンで選択された全ての値を折れ線グラフに反映しています。

[ブラウザで表示]

国名を複数選択すると、そのデータが折れ線グラフに反映されることが確認できます。

Dash⑰（パターンマッチング・コールバック／ALLセレクタ）

パターンマッチング・コールバック

パターンマッチング・コールバックとは、条件に合ったコンポーネントの値を利用するコールバックです。

パターンマッチング・コールバックを使うと、UIに新たにコンポーネントを加えたり、そのコンポーネントに対してコールバックを適用したりすることができます。

パターンマッチング・コールバックを作成するために、次の３種類のセレクタを条件に使用します。

  • ALLセレクタ
  • MATCHセレクタ
  • ALLSMALLERセレクタ

ALLセレクタ

ALLセレクタは、IDキー”type”が一致する全てのコンポーネントをコールバックで利用できるセレクタです。

今回は、ボタンをクリックすると新たにドロップダウンが追加されるアプリケーションを作成します。

ドロップダウンではcountry列に含まれる国名が選択でき、各ドロップダウンで選択された全ての国名を画面下部に表示します。

[ソースコード]

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
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, State, ALL

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

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

app.layout = html.Div(
    [
        html.Button('Push', id='add_button', n_clicks=0),
#        html.Button('Push', id='add_button'),
        html.Div(id='show_drop', children=[]),
        html.P(id='content')
    ],
    style={'width':'90%', 'margin':'2% auto'}
)

# コールバックの定義①
@app.callback(
    Output('show_drop', 'children'),
    Input('add_button', 'n_clicks'),
    State('show_drop', 'children'),
    prevent_initial_calll=True
)
def update_layout(n_clicks, children):
    new_layout = html.Div(
        [
            dcc.Dropdown(
                id={'type':'my_dropdown', 'index':n_clicks},
                options=[{'label':c, 'value':c} for c in gapminder.country.unique()],
                value=gapminder.country.unique()[n_clicks - 1]
            )
        ]
    )
    children.append(new_layout)
    return children

# コールバックの定義②
@app.callback(
    Output('content', 'children'),
    Input({'type': 'my_dropdown', 'index':ALL}, 'value'),
    prevent_initial_calll=True
)
def update_graph(selected_values):
    # 全てのドロップダウンで選択された国のリストを文字列にして返す
    return str(selected_values)

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

１つ目のコールバック関数(update_layout)では、ボタンがクリックされるとUIにドロップダウンを追加します。

２つ目のコールバック関数(update_graph)では、全てのドロップダウンの選択結果を文字列にして返すために、ALLセレクタをInputのインスタンスに設定しています。

パターンマッチング・コールバックでは、Inputメソッドなどの IDキー”index” に対して、セレクタを渡すことにより選択するコンポーネントを指定します。

今回はALLセレクタを使って、IDキーが “type”:”my_dropdown”となっているコンポーネントの全てのvalue値をコールバックで返します。

[ブラウザで表示]

ボタンを押すと、ドロップダウンが追加されます。

またそれぞれのドロップダウンで国名を選択すると、選択された国名が全て画面下部にテキストで表示されます。

Dash⑯（コールバック／複数入力）

tipsデータセットを用いて、出力と入力が２つずつあるアプリケーションを作成します。

複数の入出力があるコールバック

曜日を選択するドロップダウンと、グラフを選択するドロップダウンを配置します。

グラフはドロップダウンで選択されたグラフ（棒グラフ／散布図）が表示されます。

  • 棒グラフ
    曜日ごとの売り上げの累計を表示。
  • 散布図
    X軸に会計額、Y軸にチップの金額を表示。

コールバック関数では選択された曜日とグラフの種類を抽出します。

この選択された曜日とグラフの種類に合わせてグラフを描画し、見出しと図形（figure）を返します。

[ソースコード]

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
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

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

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

app.layout = html.Div(
    [
        html.H3(id='title', style={'textAlign':'center'}),
        html.Div(
            [
                html.Div(
                    [
                        html.H4('曜日選択'),
                        dcc.Dropdown(
                            id='day_selector',
                            options=[
                                {'value':d, 'label':d}
                                for d in tips.day.unique()
                            ],
                            multi=True,
                            value=['Thur', 'Fri', 'Sat', 'Sun']
                        )
                    ]
                ),
                html.Div(
                    [
                        html.H4('グラフ選択'),
                        dcc.Dropdown(
                            id='graph_selector',
                            options=[
                                {'value':'bar', 'label':'bar'},
                                {'value':'scatter', 'label':'scatter'}
                            ],
                            value='bar',
                        )
                    ]
                )
            ]
        ),
        dcc.Graph(id='app-graph')
    ]
)

# コールバックの定義
@app.callback(
    Output('title', 'children'),
    Output('app-graph', 'figure'),
    Input('day_selector', 'value'),
    Input('graph_selector', 'value'),
)
def update_graph(selected_days, selected_graph):
    selected_df = tips[tips['day'].isin(selected_days)]     # データフレーム作成
    if selected_graph == 'bar':
        title = ('曜日ごとの売り上げ（棒グラフ）',)
        figure = px.bar(selected_df, x='day', y='total_bill', height=500)
    else:
        title = ('テーブルごとデータ（散布図）',)
        figure = px.scatter(selected_df, x='total_bill', y='tip', color='smoker', height=500)
    return title, figure

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

曜日選択用のドロップダウンは複数選択とし、グラフ選択用のドロップダウンは単数選択としました。

曜日の選択肢は、データのday列のユニーク要素を使って作成しています。

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

[ブラウザで表示]

選択された曜日がグラフに反映され、選択された種類のグラフが表示されることを確認できます。

Dash⑮（コールバック／スライダー）

スライダー

Sliderコンポーネントのハンドル位置に応じて、見出しに表示される値が変化するDashアプリケーションを作成します。

app.callbackデコレータの出力項目に見出しのIDと属性、入力項目にはSliderコンポーネントのIDと属性を設定します。（21～24行目）

コールバック関数はSliderコンポーネントの値を返り値とします。（25～26行目）

[ソースコード]

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
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

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

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Slider(
            id='slider1',
            value=0,
            min=0,
            max=10,
            updatemode='drag'
        )
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('slider1', 'value'),
)
def update_title(num_value):
    return num_value

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

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

[ブラウザで表示]

スライダーの位置を変えると、見出しの数字が変わるアプリケーションができました。

Dash⑭（コールバック／ボタン）

コールバック

コールバックは、インタラクティブなDashアプリケーションを作成するときに重要な機能です。

ユーザによるスライダーなどでの選択や、グラフ上でのマウスの動きをもとに、コールバックを利用することでインタラクティブなアプリケーションを構築できます。

ボタンクリック

ボタンをクリックするとテキストエリアへ入力された文字を見出しに反映するDashアプリケーションを作成します。

コールバックを実装するためには下記の設定を行います。

  1. レイアウトの作成で、各コンポーネントにIDを設定。（10行目、12行目、15行目）
  2. コールバック関数を定義。（19～25行目）

[ソースコード]

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
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

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

app.layout = html.Div(
    [
        html.H1(id='head-title'),
        dcc.Textarea(
            id='text-content',
            value='初期値',
        ),
        html.Button(id='btn1', n_clicks=0, children='submit')
    ]
)

@app.callback(
    Output('head-title', 'children'),
    Input('btn1', 'n_clicks'),
    State('text-content', 'value')
)
def update_title(n_clicks, text_value):
    return text_value

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

コールバック関数は次のように動作します。

  1. コールバック関数の引数に、InputインスタンスとStateインスタンスに指定された属性が割り当てられる。
  2. コールバック関数はInputインスタンスで指定した属性が更新されると呼び出され、その返り値をOutputインスタンスで指定した属性で渡す。

コールバック関数の関数名と引数名は任意です。(24行目)

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

[ブラウザで表示]

テキストエリアに文字を入力してボタンを押すと、上部のテキストを変更されます。

Dash⑬（複数のコンポーネントを組み合わせた配置）

複数のコンポーネントを組み合わせた配置

コンポーネントの配置を利用して、いろいろなコンポーネントを配置してみます。

コンポーネントの配置が複雑になる場合は、Divコンポーネントを用いてデザインの大枠を作成し、それに対して必要なコンポーネントを格納するのがオススメです。

[ソースコード]

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
117
118
119
120
121
122
123
124
import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px

style1 = {
    'width':'40%',              # 横幅
    'height':'280px',           # 高さ
    'backgroundColor':'yello',  # 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

style2 = {
    'width':'27%',              # 横幅
    'height':'280px',           # 高さ
    'backgroundColor':'skyblue',# 背景色
    'margin':'2%',              # マージン
    'display':'inline-block'    # 横並びにする
}

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

# 左上のマークダウン
top_left = html.Div(
    [
        html.H1('Dashアプリケーション'),
        dcc.Markdown(
            '''
            5つのDivクラスの領域に、複数のコンポーネントを配置
            ''',
            style={
                'fontsize':20,
                'textAlign':'left',
                'backgroundColor':'lightgray',
                'padding':'3%'
            }
        )
    ],
    style=style1
)

# グラフの定義
fig=px.line(
    x=[1,2,3,4,5],
    y=[[4,3,5,2,6],[3,5,4,6,3]],
    title='Dash Graph'
)
fig.data[0].name='茨城'
fig.data[1].name='千葉'


# 右上のグラフ
top_right = html.Div(
    [
        dcc.Graph(
            figure=fig
        )
    ],
    style=style1
)

# 左下のドロップダウンとスライダー
buttom_left = html.Div(
    [
        html.H3('ドロップダウン'),
        dcc.Dropdown(
            options=[{'label':'埼玉','value':'埼玉'},
                     {'label':'栃木','value':'栃木'}],
            value='栃木'
        ),
        html.H3('スライダー'),
        dcc.Slider(min=-10, max=10, marks={i: f'label{i}' for i in range(-10, 11, 5)})
    ],
    style=style2
)

# 左中央のテキストエリアとボタン
buttom_center = html.Div(
    [
        html.H3('テキストエリア'),
        html.Textarea(style={'height':60, 'width':'60%'}),
        html.Button('ボタン')
    ],
    style=style2
)

# 右下のチェックリストとラジオボタン
buttom_right = html.Div(
    [
        html.H3('チェックリスト'),
        dcc.Checklist(
            options=[
                {'label':'福岡', 'value':'福岡'},
                {'label':'佐賀', 'value':'佐賀'},
                {'label':'宮崎', 'value':'宮崎'}
            ],
            value=['福岡','宮崎'],
            className='five columns'
        ),
        html.H3('ラジオボタン'),
        dcc.RadioItems(
            options=[
                {'label':'高松', 'value':'高松'},
                {'label':'松山', 'value':'松山'},
                {'label':'高知', 'value':'高知'}
            ],
            value='松山',
            className='five columns'
        ),
    ],
    style=style2
)

app.layout = html.Div(
    children=[
        html.Div([top_left, top_right]),
        html.Div([buttom_left, buttom_center, buttom_right])
    ]
)

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

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

[ブラウザで表示]

いろいろな種類のコンポーネントを配置することができました。

Dash⑫（複数コンポーネントの配置／スタイルシートをカスタマイズ）

スタイルシートをカスタマイズ

今回は、Dashの公式ドキュメントで用いられるスタイルシートと引数 styleを併用して、複数のDivコンポーネントを配置します。

要素の横並びのcssはスタイルシートのクラス名を引数 classNameに設定します。

[ソースコード]

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
import dash
import dash_html_components as html

ex_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
# ファイル名をアプリ名として起動。その際に外部CSSを指定する。
app = dash.Dash(__name__, external_stylesheets=ex_stylesheets)

# 1段目用のcss辞書
style1 = {'height':'200px', 'margin':'2%', 'backgroundColor':'green'}

# 2段目用のcss辞書
style2 = {'height':'200px', 'backgroundColor':'skyblue'}

app.layout = html.Div(
    [
        html.H1('5つの長方形を並べたアプリケーション'),
        # 1段目の2つの長方形
        html.Div(
            [
                html.Div(style=style1, className='five columns'),
                html.Div(style=style1, className='five columns')
            ]
        ),
        html.Div(
            [
                html.Div(style=style2, className='four columns'),
                html.Div(style=style2, className='four columns'),
                html.Div(style=style2, className='four columns')
            ]
        )
    ]
)

if __name__ == '__main__':
    # `debug=True`でhot-reloadingモードを有効にし、コード上の変更を画面に反映する。
    app.run_server(debug=True)

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

[ブラウザで表示]

スタイルシートと引数 styleを併用して、複数のDivコンポーネントを配置することができました。