Dash
Contents
Dash¶
DashではHTMLのタグをPythonのオブジェクトとして構成できます
レイアウト¶
import dash
from dash import html
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(
[html.H1("見出し1")],
id="inner1",
),
html.Div(
[
html.H2("見出し2", style={"display": "inline-block"}),
html.Img(
src="https://www.asakura.co.jp/user_data/product_image/12258/1.jpg",
style={"display": "inline-block"},
),
],
id="inner2",
),
],
id="outer",
)
if __name__ == "__main__":
app.run_server(debug=True)
dash_layout.py
を実行すると、 Fig. 4 のように描画されます
Markdown・グラフ¶
HTMLタグのほか、Markdown記法で書かれたテキストや、Plotlyで記述したグラフをレイアウトできます
import dash
from dash import dcc, html
import plotly.express as px
fig = px.line(x=[1, 2, 3], y=[3, 5, 2], width=400, height=400)
text = """
#### この部分はMarkdown記法で記述しています
- リスト1
- リスト2
---
```
import plotly.express as px
fig = px.line(x=[1, 2, 3], y=[3, 5, 2], width=400, height=400)
```
"""
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(
[html.H1("Markdownとグラフ")],
id="inner1",
),
html.Div(
[
dcc.Markdown(text, style={"display": "inline-block"}),
dcc.Graph(figure=fig, style={"display": "inline-block"}),
],
id="inner2",
),
],
id="outer",
)
if __name__ == "__main__":
app.run_server(debug=True)
dash_figure.py
を実行すると、 Fig. 5 のように描画されます