如何使用 dash-bootstrap-component 布局在绘图破折号中制作 dcc.Graph，其高度是行中其他图形的两倍

Question

我希望我的图表看起来像这样：

但是通过下面的代码，我明白了。

它与问题here类似，但我似乎无法做出该解决方案（添加 style="display":"inline-block" 来工作）。

有什么想法可以做到这一点吗？ ChatGPT/code-interpreter 也给出了这个答案，这样做似乎是“合乎逻辑的”，但我被难住了......

我的代码：

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc
import plotly.express as px

# Function to draw the figure
def drawFigure() -> html.Div:
    """
    Draw a Plotly figure using the Iris dataset.

    Returns:
        html.Div: A div containing the Plotly figure.
    """
    return  html.Div([
        dcc.Graph(
            figure=px.bar(
                df, x="sepal_width", y="sepal_length", color="species"
            ),
            config={
                'displayModeBar': False
            }
        ) 
    ], className='mt-3 mb-3')

# Data
df = px.data.iris()

# Build App
app = Dash(external_stylesheets=[dbc.themes.LITERA])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col([
            drawFigure() 
        ], width=3, style={"height": "100%"}), # Make this column 100% of the available height
        dbc.Col([
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=6),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], style={"height":"50%"}), # Each of these rows will be 50% of the available height
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=6),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], style={"height":"50%"}), # Each of these rows will be 50% of the available height
        ]),
    ]), 
], style={'background-color': 'black'})

# Run app and display result inline in the notebook
app.run_server(host='0.0.0.0', port=8050, debug=True,  jupyter_height=1600)

Answer 1

我正在处理如下内容：

import pandas as pd
import numpy as np
import plotly.express as px
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import dash_table

# Create dashboard
app = dash.Dash(__name__,external_stylesheets=[dbc.themes.LITERA]) # You can change external_stylesheets

# Data
df = px.data.iris()
figure=px.bar(df, x="sepal_width", y="sepal_length", color="species")

app.layout = html.Div([
    dbc.Row([
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='bar_chart',figure=figure,style={'height':780,'width':'auto'}),
                            ],width={'size':12,'offset':0,'order':1}),
                        ]),    
                ])
            ], className='h-100 text-left')
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                                       
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='box_plots',figure=figure,style={'height':375,'width':'auto'}), #Heatmap plot
                            ],width={'size':12,'offset':0,'order':1}),    
                        ]),
                ], className='text-left')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                            dbc.Row([
                                dbc.Col([
                                    dcc.Graph(id='3d_graph',figure=figure,style={'height':375,'width':'auto'})    
                                ],width={'size':12,'offset':0,'order':1}),    
                            ])
                        ], className='text-left')
                    ])
                ], xs=12),
            ], className='pt-1'),
        ], xs=4),
        dbc.Col([
            dbc.Card([
                dbc.CardBody([                                        
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='box_plots_2',figure=figure,style={'height':375,'width':'auto'}),
                            ],width={'size':12,'offset':0,'order':1}),    
                        ]),
                ], className='text-left')
            ]),
            dbc.Row([
                dbc.Col([
                    dbc.Card([
                        dbc.CardBody([
                        dbc.Row([
                            dbc.Col([
                                dcc.Graph(id='3d_graph_2',figure=figure,style={'height':375,'width':'auto'})    
                            ],width={'size':12,'offset':0,'order':1}),    
                        ])
                        ], className='text-left')
                    ])
                ], xs=12),
            ], className='pt-1'),
        ], xs=4)    
    ], className='p-2 align-items-stretch'),
])
           
if __name__ == "__main__":
    app.run_server(debug=False,port=1221)

所以我认为我们需要将所有列添加到一个大行中，然后在大行中创建 3 列，然后在最后 2 列中创建 2 行。

你会得到这个：