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或图3的高度的两倍）？

Answer 1

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

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

图表布局在破折号中

1 个答案: