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. 使用宽度来管理宽度，但如何管理高度(在这种情况下，我希望figure1的高度是figure2或figure3的两倍)？

Answer 1

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

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