如何使用 python 修改 Dash 中的布局

Question

我在 python 中使用破折号我想制作如下图所示的布局，其中所有内容都适合 1 页或 1 1/2 页，我尝试通过编写以下代码来实现它，但我无法得到它。因为我无法更改布局中列的大小，所以我们将不胜感激。谢谢你。

我所说的规范图是这样的。 https://plotly.com/python/bullet-charts/

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

global Mode

external_stylesheets = [dbc.themes.BOOTSTRAP, 'https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, suppress_callback_exceptions=True, external_stylesheets=external_stylesheets)

app.layout = html.Div([html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    dbc.Row([dcc.Graph(id='plot1', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', 'width': '100vh',
                                                          'height': '28vh'}, ), ], style={'height': '20vh'}),
                    dbc.Row([dcc.Graph(id='plot2', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', }, )],
                            style={'width': '10vh', 'height': '30vh'}),
                    dbc.Row([dcc.Graph(id='plot3', style={'text-align': 'left', 'display': 'inline-block',
                                                          'background-color': 'black', }, )],
                            style={'width': '10vh', 'height': '30vh'})
                ], style={
                    'align': 'left',
                }),
                dbc.Col([dbc.Col([dcc.Graph(id='plot4', style={'text-align': 'left', 'display': 'inline-block',
                                                               'background-color': 'black'})], )], style={
                    'align': 'left',
                }),
                dbc.Col([
                    dcc.Graph(id='plot5',
                              style={'text-align': 'left', 'display': 'inline-block', 'background-color': 'black'}),
                ]),

            ]),
            dbc.Row([
                dbc.Col([dcc.Graph(id='plot6', style={'text-align': 'left', 'display': 'inline-block',
                                                      'background-color': 'black'}), ]),
                dbc.Col([dcc.Graph(id='plot7', style={'text-align': 'left', 'display': 'inline-block',
                                                      'background-color': 'black'}), ]),
                dbc.Col([dcc.Graph(id='plot9',
                                   style={'text-align': 'left', 'display': 'inline-block', 'background-color': 'black',
                                          'width': '110vh', 'height': '30vh'})]),
            ], ),
            dbc.Row([
                dbc.Col([dcc.Graph(id='plot10', style={'display': 'inline-block', 'width': '70vh', 'height': '40vh'}),
                         ]),

                dbc.Col([dcc.Graph(id='plot12',
                                   style={'display': 'inline-block', 'width': '50vh', 'height': '40vh',
                                          'marginLeft': '7%', }),
                         ]),
            ]),
        ])),
])
])

if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

我猜你必须做 3 行，每行 2 列，然后向它们添加行，如下所示。

• 第 1 行
  • Col1
    • 第 1 行 - 情节 1
    • 第 2 行 - 情节 2
    • 第 3 行 - 情节 3
  • Col2
    • 第 1 行 - 情节 4
• 第 2 行
  • Col1
    • 第 4 行 - 情节 5
    • 第 5 行 - 情节 6
    • 第 6 行 - 情节 7
  • Col2
    • 第 1 行 - 情节 4
• 第 3 行
  • Col1
    • 第 7 行 - 情节 9
  • Col2
    • 第 3 行 - 情节 10

不确定我是否正确理解了您的要求。