小编fry*_*n84的帖子

Plotly-Dash:如何将组件跨两行

我正在尝试使用破折号和引导网格创建仪表板。这是我想要实现的目标:

在此输入图像描述

根据文档(https://dash-bootstrap-components.opensource.faculty.ai/docs/components/layout/)我可以在行中创建列,但是有没有办法在列中创建行?我需要我的图表跨越前一列的两“行”。我想这可以通过以下方式实现:

dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content]),dbc.Row([content])]),
dbc.Col([dbc.Row([content]),dbc.Row([content])])
Run Code Online (Sandbox Code Playgroud)

然而,这些柱子只是相互堆叠。这是我的前两列的代码:

    app.layout =   dbc.Col([
    dbc.Col([ html.H1("temp1",style={'textAlign': 'center' ,'height':'5%','margin-top': '30px', 'margin-bottom': '25px','font-family': 'Consolas'}),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_1', children=['Sales'], className='card-title'),
                                        html.P(id='card_text_1', children=['Sample text.'])
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height':'30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_2', children=['Eng'], className='card-title'),
                                        html.P(id='card_text_2', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', 'margin-bottom': '15px','height': '30%'}
                        ),
                        dbc.Card(
                            [
                                dbc.CardBody(
                                    [
                                        html.H4(id='card_title_3', children=['Diff'], className='card-title'),
                                        html.P(id='card_text_3', children=['Sample text.']),
                                    ], style={'textAlign': 'center','font-family': 'Consolas'}
                                )
                            ], style={'margin-top': '15px', …
Run Code Online (Sandbox Code Playgroud)

python dashboard python-3.x plotly-dash

5
推荐指数
1
解决办法
2433
查看次数

标签 统计

dashboard ×1

plotly-dash ×1

python ×1

python-3.x ×1