尽管使用了height=100%或autofit，但无法让图表垂直自动贴合屏幕。

Question

我是 plotly 的新手，但似乎找不到解决这个问题的方法。我有四个图表，我想在全屏的一列中显示，也就是说，我想垂直地看到所有四个图表，而不需要滚动。

然而，当我绘制它们时，我最终不得不向下滚动。我试过设置size=100%或autofit=True，但都不奏效--显示图表的那一列对屏幕来说还是太大，我需要滚动。然而，当我使用width=50%时，这就奏效了；图表只占了屏幕宽度的一半，但我仍然需要向下滚动来查看所有的图表。我把我的代码列在下面。

如果有任何帮助，我将非常感激

app = dash.Dash()

app.layout = html.Div([
    # State
    html.Div([
        html.H1(id='map-header',children='State'),
        dcc.Graph(id='map-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'State'}}),
    # Business Units
    html.Div([
        html.H1(id='bu-header',children='Business Units'),
        dcc.Graph(id='bu-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Business Unit'}})
    ]),
    # Job Family
    html.Div([
        html.H1(id='jf-header',children='Job Family'),
        dcc.Graph(id='jf-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Job Family'}})
    ]),
    # Job Level
    html.Div([
        html.H1(id='fl-header',children='Job Level'),
        dcc.Graph(id='jl-graph',
                  figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Job Level'}})
    ])
    ])

],style={'width':'50%'})

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

Answer 1

你可以通过在每张图上添加 'height':'100' 里面 dcc.graph 这样的部分。

dcc.Graph(id='jl-graph',
              figure={'data':[{'x':[3,2],'y':[7,12]}],'layout':{'title':'Job Level', 'height':'100'}})

但请记住，有可能这样的图看起来不容易读懂。另外，我建议你使用其他的 layout 仪表盘 rows 和 columns或 cards并在这些组件中添加你的图形，然后调整它们的大小，以适应该 container 在其中，他们是。