如何使用 Dash Bootstrap 組件 position 我的圖表

Question

我的圖表在頁面上的定位有問題，在這種情況下，我使用 Dash Bootstrap 組件在頁面上創建行和列……

我的圖形應該在卡片旁邊，但它在卡片下面，我哪里做錯了？

app.layout = html.Div(children=[

        dbc.Row([

                dbc.Col([

                        dbc.Card([
                                
                                 html.H5('Opcões'),
                                 dcc.Dropdown(opcoes, value = 'ACS' , id='check_opcao', style={'width': '90%'}),
                                 
                        ],style={'height': '90vh', 'margin': '10px', 'padding': '20px', 'width': '300px'})

                ], md=4),

                dbc.Col([

                        dbc.Row([dcc.Graph( id='grafico_gc_players', style={'width': '50%'})])

                ],md=8)
        ])
        
        
        ])
@app.callback(
        Output('grafico_gc_players', 'figure'),
                [
                Input('check_opcao', 'value'),
                
                ])

def renderizar_graficos(check_opcao):

        
    if check_opcao == 'ACS':
                fig = px.bar(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x= check_opcao, y= 'ACS',  title='Top 10 jogadores em: ' + check_opcao, color='Player', barmode = 'stack', 
                        labels={
                                'Player': 'Nome e Time',
                                'ACS': 'ACS'}, template='plotly_dark', text='ACS')

    elif check_opcao == 'HS%':
                 fig = px.scatter(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x="Player", y= check_opcao, title='Os 10 Jogadores com a maior taxa de HS e seu KD no Valorant Champions:',
                        color="Player",
                        labels={
                                'Player': 'Jogador',
                                'HS%': 'HS%'}, size='ACS',  
                        hover_data=['Player'] , template='plotly_dark', text='HS%')
    else :
        fig = px.bar(df.nlargest(10, ['Rnd','ACS','K:D','KAST','ADR','KPR','APR','FKPR','FDPR','HS%','CL%','KMax','K','D','A','FK','FD']), x='Player', y= check_opcao, color= check_opcao, title='Top 10 jogadores em: ' + check_opcao, barmode = 'stack', 
            labels={
                    'Player': 'Nome e Time'}, text= check_opcao, template='plotly_dark')

    fig.update_layout(margin=dict(l=0, r=0, t=20, b=20), height=500)

    return fig

屏幕截圖顯示了我的圖表在我的儀表板上的樣子

儀表板布局

Answer 1

我想你可能需要使用 Bootstrap 的網格系統，如下所示：

app = dash.Dash(external_stylesheets=[dbc.themes.GRID])

output：