プログラミング:python:webアプリケーションフレームワーク:dash:基本構造
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
プログラミング:python:webアプリケーションフレームワーク:dash:基本構造 [2019/07/15 13:12] sotoyama [グラフ] |
プログラミング:python:webアプリケーションフレームワーク:dash:基本構造 [2019/07/15 13:48] (現在) sotoyama |
||
|---|---|---|---|
| ライン 67: | ライン 67: | ||
| </code> | </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 |}} | ||
| ==== グラフ ==== | ==== グラフ ==== | ||
| ライン 84: | ライン 145: | ||
| ) | ) | ||
| </code> | </code> | ||
| + | {{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_棒グラフ.jpg?direct&600 |}} | ||
| === 折れ線グラフ === | === 折れ線グラフ === | ||
| ライン 125: | ライン 187: | ||
| ) | ) | ||
| </code> | </code> | ||
| + | {{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_折れ線グラフ.jpg?direct&600 |}} | ||
| === 円グラフ === | === 円グラフ === | ||
| ライン 183: | ライン 246: | ||
| ) | ) | ||
| </code> | </code> | ||
| + | {{ :プログラミング:python:webアプリケーションフレームワーク:dash:dash_散布図.jpg?direct&600 |}} | ||
| === 箱ひげ図 === | === 箱ひげ図 === | ||
| ライン 194: | ライン 257: | ||
| </code> | </code> | ||
| + | ==== Markdown記法 ==== | ||
| + | <code python> | ||
| + | dcc.Markdown(''' | ||
| + | # 見出し１ | ||
| + | ## 見出し２ | ||
| + | - 箇条書き１ | ||
| + | - 箇条書き２ | ||
| + | - 箇条書き３ | ||
| + | - 箇条書き４ | ||
| + | ''') | ||
| + | </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/基本構造.1563196348.txt.gz · 最終更新: 2019/07/15 13:12 by sotoyama
