无法将图表垂直自动调整屏幕，尽管使用 height=100% 或自动调整

Question

所以我是剧情新手，似乎找不到解决这个问题的方法。我有四个图表，我想全屏显示在一列中，即，我想垂直查看所有四个图表，而无需滚动。

然而，当我绘制它们时，我最终不得不向下滚动。我尝试过设置 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

您可以通过在dcc.graph部分内添加'height':'100'将每个图形的高度更改为 100，如下所示：

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

但请记住，图表可能以这种方式看起来不可读。或者，我建议你使用破折号的其他layout组件，如rows和columns，或cards，并将你的图形添加到这些组件中，然后它们调整大小以适应它们所在的container。