プログラミング:python:webアプリケーションフレームワーク:dash:基本構造

差分

この文書の現在のバージョンと選択したバージョンの差分を表示します。

この比較画面にリンクする

--- プログラミング:python:webアプリケーションフレームワーク:dash:基本構造 [2019/07/15 13:26]
sotoyama
+++ プログラミング:python:webアプリケーションフレームワーク:dash:基本構造 [2019/07/15 13:48] (現在)
sotoyama
@@ ライン 67: / ライン 67: @@
 </code>
+==== フォーム ====
+<code python>
+# ドロップダウン（単一選択）
+dcc.Dropdown(
+    options=[
+        {'label': '佐藤', 'value': 'sato'},
+        {'label': '鈴木', 'value': 'suzuki'},
+        {'label': '田中', 'value': 'tanaka'},
+    ],
+    value='suzuki'
+),
+html.Br(),
+# ドロップダウン（複数選択）
+dcc.Dropdown(
+    options=[
+        {'label': '佐藤', 'value': 'sato'},
+        {'label': '鈴木', 'value': 'suzuki'},
+        {'label': '田中', 'value': 'tanaka'},
+    ],
+    value=['sato', 'suzuki'],
+    multi=True
+),
+html.Br(),
+# ラジオボタン
+dcc.RadioItems(
+    options=[
+        {'label': '佐藤', 'value': 'sato'},
+        {'label': '鈴木', 'value': 'suzuki'},
+        {'label': '田中', 'value': 'tanaka'},
+    ],
+    value='suzuki'
+),
+html.Br(),
+# チェックボックス
+dcc.Checklist(
+    options=[
+        {'label': '佐藤', 'value': 'sato'},
+        {'label': '鈴木', 'value': 'suzuki'},
+        {'label': '田中', 'value': 'tanaka'},
+    ],
+    value=['suzuki', 'tanaka']
+),
+html.Br(),
+# テキストボックス
+dcc.Input(value='佐藤', type='text'),
+html.Br(),
+# スライダー
+dcc.Slider(
+    min=0,
+    max=5,
+    marks={i:str(i) for i in range(1,6)},
+    value=3
+)
+</code>
+{{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_フォーム.jpg?direct&600 |}}
 ==== グラフ ====
@@ ライン 209: / ライン 270: @@
 </code>
 {{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_markdown.jpg?direct&600 |}}
+==== Callback関数 ====
+<code python>
+import dash
+import dash_core_components as dcc
+import dash_html_components as html
+from dash.dependencies import Input, Output
+# ～～～ 省略 ～～～
+app.layout = html.Div([
+    dcc.Input(id='input-div', value='initial value', type='text'),
+    html.Div(id='output-div')
+])
+@app.callback(
+    Output(component_id='output-div', component_property='children'),
+    [Input(component_id='input-div', component_property='value')]
+)
+def update(input_value):
+    return 'You entered {}'.format(input_value)
+</code>
+{{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_callback.jpg?direct&600 |}}

プログラミング/python/webアプリケーションフレームワーク/dash/基本構造.1563197191.txt.gz · 最終更新: 2019/07/15 13:26 by sotoyama