如何将 Dash 布局保存到 HTML 文件

Posted 2023-02-16

【中文标题】如何将 Dash 布局保存到 HTML 文件

【英文标题】：How to save a Dash layout to an HTML file

【发布时间】：2020-05-25 01:45:35

【问题描述】：

我正在尝试将 Dash 布局保存在 html 文件中，但我找不到实现此目的的方法。奇怪的是，保存单个 Plotly 图形很容易，但不是 Dash 布局。有人有解决办法吗？

在https://***.com/a/51013594/3057377看到这个问题已经有答案了，但是没看懂。特别是关于交互性损失的说明。可以看到在保存单个绘图时保持交互性，因此对于整个布局应该是相同的。

以下是我已经尝试过的事情：

import dash_core_components as dcc
import dash_html_components as html
import dash
import plotly as py
import plotly.graph_objs as go

# Create two figures.
fig1 = go.Figure(data=go.Scatter(x=[0, 1, 2], y=[0, 10, 0]))
fig2 = go.Figure(data=go.Scatter(x=[0, 1, 2], y=[0, -10, 0]))

# Write fig1 to HTML. The three methods below work.
py.io.write_html(fig1, file="fig1_a.html", auto_open=True)
fig1.write_html(file="fig1_b.html", auto_open=True)
py.offline.plot(fig1, filename='fig1_c.html', auto_open=True)

# Write fig2 to HTML. The three methods below work.
py.io.write_html(fig2, file="fig2_a.html", auto_open=True)
fig2.write_html(file="fig2_b.html", auto_open=True)
py.offline.plot(fig2, filename='fig2_c.html', auto_open=True)


# Now create a layout that will be displayed in an HTML page.
app = dash.Dash(__name__)
app.layout = html.Div([dcc.Graph(id="fig1", figure=fig1),
                       dcc.Graph(id="fig2", figure=fig2)])

# Trying to save the layout to HTML doesn’t work with the same three methods as above.
print("############  1")
try:
    py.io.write_html(app.layout, file="app_layout_a.html", auto_open=True)
except Exception as e:
    print(e)

print("############  2")
try:
    app.layout.write_html(file="app_layout_c.html", auto_open=True)
except Exception as e:
    print(e)

print("############  3")
try:
    py.offline.plot(app.layout, filename='app_layout_b.html')
except Exception as e:
    print(e)

# But the layout displays correctly when served by Dash.
app.run_server(debug=True)

【参考方案1】：

您可以将包含图表信息的 HTML 代码保存到变量中。为了绘制图形，您可以使用dash_html_components 中的html.Iframe。如果图表是在 Dash 回调中生成的，您可以返回该变量或 Iframe 作为回调的输出。

我还分享了如何将图形保存到 HTML。该图保持交互式，并且 HTML 文件比其他替代方案（如 fig.write_html() ）轻得多。

with open('plot.html', 'w') as f:
    f.write(fig.to_html(full_html=False, include_plotlyjs='cdn'))

这是 Dash 应用程序中的一个最小工作示例。在这种情况下，图形处于回调中，因为每次您单击底部的“旋转”时，图形都会更新并旋转刻度标签。这个应用是对Plotly Docs的修改：

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px

df = px.data.tips()

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Button("Rotate", id='button', n_clicks=0), 
    html.Div(id="output", children=[])
])

@app.callback(
    Output('output', 'children'), # The output will be displayed in  html.Div(id="output)
    [Input("button", "n_clicks")])
def rotate_figure(n_clicks):
    fig = px.histogram(df, x="sex", height=500)
    fig.update_xaxes(tickangle=n_clicks*45)

    # The plotly figure is saved as HTML in a variable
    html_data = fig.to_html(full_html=False, include_plotlyjs='cdn')
    
    # The variable is then displayed as a plot using Iframe from dash_html_components
    html_plot = html.Iframe(srcDoc = html_data, 
                            style = "height": "1000px", 
                                     "width": "1000px",
                                     "display":"flex",
                                     "align-items": "center", 
                                     "justify-content":  "center"
                            )
    
    # Now you can return the Iframe as a children of a Div
    return html_plot

app.run_server(debug=True)

【讨论】：

如何让 iframe 响应窗口大小？

【参考方案2】：

只需使用以下命令：

fig.write_html("path/to/file.html")