Dash

DashではHTMLのタグをPythonのオブジェクトとして構成できます

レイアウト

Listing 1 dash_layout.py
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 のように描画されます

_images/dash_layout.png

Fig. 4 Dashのレイアウト

Markdown・グラフ

HTMLタグのほか、Markdown記法で書かれたテキストや、Plotlyで記述したグラフをレイアウトできます

Listing 2 dash_figure.py
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 のように描画されます

_images/md_figure.png

Fig. 5 Markdownとグラフ