使用django_plotly_dash集成的Dash应用显示空间不足如何解决？

问题根因 #

该现象属于默认容器高度配置的常见问题，并非框架Bug。django_plotly_dash默认嵌入Dash应用的iframe、以及Dash原生的图表容器都未设置适配大尺寸内容的高度参数，当图表默认渲染尺寸超出容器默认高度时，就会出现截断、需要滚动查看的情况。

可直接复用的修复方案 #

以下方案任选其一即可生效，复杂度从低到高排列：

方案1：模板调用时直接指定尺寸（最快） #

修改trial.html中的plotly_app标签，直接传入样式参数固定容器尺寸：

{%load plotly_dash%}
<!-- 方式一：通过ratio指定宽高比，0.6代表高度为宽度的60%，可自行调整数值 -->
{%plotly_app name="SimpleExample1" ratio=0.6%}

<!-- 方式二：直接指定固定宽高 -->
{%plotly_app name="SimpleExample1" style="height: 600px; width: 100%;"%}

方案2：给Dash图表组件指定高度 #

修改simple_dash_app.py中的dcc.Graph参数，增加样式配置：

dcc.Graph(
    id='example-graph-2',
    figure=fig,
    style={'height': '600px'} # 新增这一行即可
)

方案3：给Plotly图表实例配置固定高度 #

生成图表时直接指定布局高度，无需修改其他文件：

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
fig.update_layout(height=600) # 新增这一行即可

该问题属于常规的样式适配需求，框架默认配置是为了适配通用场景，不需要提交Bug报告。

内容的提问来源于stack exchange，提问作者Noskario