使用 Dash plotly 删除响应功能

Question

我正在 google 与 MacOS 11.5.2 合作。
我使用的 Dash 版本是 1.21.0

我通常在大屏幕上编写破折号代码，现在我在移动到小屏幕时注意到了这个问题。这是一个例子：

import plotly.express as px
from jupyter_dash import JupyterDash

import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([
                       dbc.Row([dbc.Col("Top left"),dbc.Col("Top right")]),
                       dbc.Row([dbc.Col("Bottom left"),dbc.Col("Bottom right")])
                       ]
    )                      

if __name__ == "__main__":
    app.run_server()

并且输出符合预期，2 x 2 网格，每个单词在各自的位置。但是当我用绘图替换文本时，网格结构会自动更改。


app = JupyterDash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
df = px.data.tips()
fig1 = px.histogram(df,x="tip")
fig2 = px.scatter(df,x="total_bill",y="tip")
fig3 = px.bar(df,x="sex")
fig4 = px.histogram(df,x="total_bill")

app.layout = html.Div([
                       dbc.Row([dbc.Col(dcc.Graph(figure=fig1,id="Histogram tip")),dbc.Col(dcc.Graph(figure=fig2,id="Scatter plot bill vs tip"))]),
                       dbc.Row([dbc.Col(dcc.Graph(figure=fig3,id="Barplot gender "),width=3),dbc.Col(dcc.Graph(figure=fig4,id="Histogram bill"),width=9)])
                       ]
    )                   

if __name__ == "__main__":
    app.run_server()

现在第一行变成垂直堆叠而不是水平堆叠。这是屏幕截图（我缩小了一点）

但如果我真的将浏览器缩小那么远，显示的布局就会正确显示

我不明白为什么响应式布局功能会在这种情况下启动，我想将其关闭，以便我的仪表板显示为 2x2 而不是 3 行布局。

Answer 1

我终于通过在我的应用程序中使用 dbc.Container 并设置 fluid=False.

解决了这个问题

使用 Dash plotly 删除响应功能

Remove responsive feature with Dash plotly

python

plotly-dash