html - 如何在 Iframe 中启用对 Plotly-Dash 应用程序的响应？

Question

我创建了一个 dash 应用程序，它托管在 Heroku 服务器上。 dash 应用程序完全响应。如果我在移动设备、iPad、桌面设备上访问它，.. 绘图大小会自动缩放并适合窗口的宽度。太棒了。但是，将此 dash 应用程序 URL 嵌入到我网站的 iframe 中后，绘图的响应能力就会丢失。它不会自动缩放以适应 iframe 的宽度。

如何确保 iframe 和 plot 响应式地自动缩放以适应窗口的宽度？

我的破折号应用程序:https://isb-hpi.herokuapp.com/

我的 iframe 代码:

<div class="iframe-container">
<iframe class="responsive-iframe" src="https://isb-hpi.herokuapp.com/"></iframe>
</div>

我的 CSS:

.iframe-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 45%;
}


.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

构造图的代码:

from warnings import showwarning
import pandas as pd
import numpy as np
import os
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

config = {'responsive': True}

figq1 = px.line(dfq1, x="month", y="final_Index", color="Bedroom",template='presentation', line_shape='spline', labels={"Bedroom": "Type"}, category_orders={"Bedroom":['1bhk', '2bhk', '3bhk']})
figq1.update_traces(line=dict(width=1))
figq1.add_trace(
    go.Scatter(
        x=dfqa1.month,
        y=dfqa1.final_Index,
        mode="lines",
        line=go.scatter.Line(color="gray", width=2),
        showlegend=True, name='all')
)
figq1.update_layout(width=750,height=500, autosize=True)
figq1.update_layout(
    xaxis=dict(
        rangeslider=dict(
            visible=True,
            thickness=.05
        ),
        type="date"
    )
)
figq1.update_layout(
    xaxis_title="Time",    yaxis_title="final_Index",legend_title="",
    font=dict(
        family="Courier New, monospace",
        size=11,
        color="RebeccaPurple"
    ),  legend=dict(
    orientation="h",
    yanchor="bottom",
    y=1.05,
    xanchor="right",
    x=1
)
)
figq1.update_yaxes(
    title=' '
)
figq1.layout.legend.itemsizing = 'constant'
figq1.layout._config= config

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

server=app.server
app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
server=app.server

tabs_styles = {'zIndex': 99, 'display': 'inlineBlock', 'height': '4vh', 'width': '12vw',
               'position': 'fixed', "background": "#323130", 'top': '12.5vh', 'left': '7.5vw',
               'border': 'grey', 'border-radius': '4px'}

tab_style = {
    "background": "#323130",
    'text-transform': 'uppercase',
    'color': 'white',
    'border': '#A9A9A9',
    'font-size': '9px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}

tab_selected_style = {
    "background": "#A9A9A9",
    'text-transform': 'uppercase',
    'color': 'white',
    'font-size': '9px',
    'font-weight': 600,
    'align-items': 'center',
    'justify-content': 'center',
    'border-radius': '4px',
    'padding':'6px'
}
app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='India', value='tab-1',style=tab_style, selected_style=tab_selected_style),
    html.Div(id='tabs-example-content')
])
@app.callback(Output('tabs-example-content', 'children'),
              Input('tabs-example', 'value'))
def render_content(tab):
    if tab == 'tab-1':
        return html.Div([
    html.Div([
        html.Div([
            dcc.Graph(id='g2', figure=figq1)
        ], className="row", style={
            'width': 750,
            "display": "block",
            "margin-left": "auto",
            "margin-right": "auto",
            }),
    ], className="row")
])


if __name__ == '__main__':
    app.run_server(debug=True, use_reloader=False)

编辑:

Answer 1

在构建具有响应式布局的 dash 应用程序时，总是使用:

config = {'responsive': True}
autosize=True

永远不要像您在我的代码中看到的那样显式设置宽度和高度来构建绘图。