在 Plotly Dash 仪表板上，当屏幕变大时，我无法使我的图形自动拉伸并在同一行中排列。如果我对每个图形使用 style={"float:right"} 和 style={"float:left"}，它将起作用，但图形将不再随着屏幕的大小变化而自动拉伸。 我已经附上了生成的图形照片。这些图形是上下分布的。我希望它们能够在宽大的浏览器窗口中并排显示，然后在中等浏览器窗口中缩小，并在小型浏览器窗口中上下分布。
app = dash.Dash()
app.layout = html.Div([
dcc.Checklist(
id='input',
options=[
{'label': 'Astoria', 'value': 'AST'},
{'label': 'Warrenton', 'value': 'WAR'},
{'label': 'Seaside', 'value': 'SEA'}
],
values=['AST', 'WAR', 'SEA'],
),
html.Div(className='row',
children=[
html.Div(
dcc.Graph(id='value-index'),
className='col s12 m6',
),
html.Div(
dcc.Graph(id='rental-index'),
className='col s12 m6',
)
],
)
])
@app.callback(
Output('value-index', 'figure'),
[Input(component_id='input', component_property='values')]
)
def update_graph(input_data):
return {
'data': [
{'x': astoriaValueIndex.index, 'y': astoriaValueIndex.Value, 'type': 'line', 'name': 'Astoria'},
{'x': warrentonValueIndex.index, 'y': warrentonValueIndex.Value, 'type': 'line', 'name': 'Warrenton'},
{'x': seasideValueIndex.index, 'y': seasideValueIndex.Value, 'type': 'line', 'name': 'Seaside'},
],
'layout': {
'title': 'Zillow Value Index'
}
}
@app.callback(
Output('rental-index', 'figure'),
[Input(component_id='input', component_property='values')]
)
def update_graph(input_data):
return {
'data': [
{'x': astoriaRentalIndex.index, 'y': astoriaRentalIndex.Value, 'type': 'line', 'name': 'Astoria'},
{'x': warrentonRentalIndex.index, 'y': warrentonRentalIndex.Value, 'type': 'line', 'name': 'Warrenton'},
{'x': seasideRentalIndex.index, 'y': seasideRentalIndex.Value, 'type': 'line', 'name': 'Seaside'},
],
'layout': {
'title': 'Zillow Rental Index'
}
}
[enter image description here][1]
if __name__ == '__main__':
app.run_server(debug=True)