python - 破折号中的图形布局

Question

我有一个非常普遍的问题：如何在 python 中由 dash-plotly 制作的仪表板中管理分区/图表的布局。假设我有以下代码：

def charts():
    data = [go.Bar(
        x=['giraffes', 'orangutans', 'monkeys'],
        y=[20, 14, 23] )]
    return data
app = dash.Dash()

app.layout = html.Div([

    html.Div([
        dcc.Graph(
            id='figure1',
            figure=charts()
        ),
    ], style={'width': '49%', 'display': 'inline-block'}),
    html.Div([
        dcc.Graph(
            id = 'figure2',
            figure=charts()
        ),
        dcc.Graph(
            id='figure3',
            figure=charts()
        )
    ], style= {'width': '49%', 'display': 'inline-block'})
])

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

我想要的是：

+++++++++++++++++++++++
+         +  figure2  +
+ figure1 +           +
+         +  figure3  + 
+++++++++++++++++++++++

但我得到的是：

+++++++++++++++++++++++
+         +  figure2  +
+         +           +
+ figure1 +  figure3  + 
+++++++++++++++++++++++

问题在这里：

1. 一般来说，如何管理参数来改变布局？
2. 使用宽度来管理宽度，但如何管理高度（在这种情况下，我希望图 1 的高度是图 2 或图 3 的两倍）？

Answer 1

dcc.Graph 的 layout 标签用于设置图形的布局，而不是 HTML。我通常使用引导程序或任何其他 CSS 来获取网格配置，并且使用网格系统来对齐事物很容易。您可以通过在代码中附加此行来添加外部或内联样式表。根据您使用的 css 更改“external_url”。

app.css.append_css({"external_url": "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"})