Bootstrap 4 如何将Plotly graph主题与仪表板匹配;使用引导的背景色?

Bootstrap 4 如何将Plotly graph主题与仪表板匹配;使用引导的背景色?,bootstrap-4,plotly-dash,plotly-python,Bootstrap 4,Plotly Dash,Plotly Python,我正在努力使用Bootstrap为我的Dash应用程序的背景获得稳定/一致的背景色 下面是我如何对其中一个图形进行编码的: fig = go.Figure(go.Bar( x=[playerEAinfo['Crossing'].iloc[0], playerEAinfo['Finishing'].iloc[0], playerEAinfo['LongPassing'].iloc[0],playerEAinfo['LongShots'

我正在努力使用Bootstrap为我的Dash应用程序的背景获得稳定/一致的背景色

下面是我如何对其中一个图形进行编码的:

fig = go.Figure(go.Bar(
            x=[playerEAinfo['Crossing'].iloc[0], playerEAinfo['Finishing'].iloc[0],
                    playerEAinfo['LongPassing'].iloc[0],playerEAinfo['LongShots'].iloc[0],playerEAinfo['BallControl'].iloc[0],
                    playerEAinfo['Dribbling'].iloc[0], playerEAinfo['Positioning'].iloc[0],playerEAinfo['Vision'].iloc[0]],
            y=['Crossing', 'Finishing', 'Long Passes', 'Long Shots','Ball Control', 'Dribbling', 'Positioning','Vision'],text=[playerEAinfo['Crossing'].iloc[0], playerEAinfo['Finishing'].iloc[0],
                    playerEAinfo['LongPassing'].iloc[0],playerEAinfo['LongShots'].iloc[0],playerEAinfo['BallControl'].iloc[0],
                    playerEAinfo['Dribbling'].iloc[0], playerEAinfo['Positioning'].iloc[0],playerEAinfo['Vision'].iloc[0]],
                    textposition='auto',orientation='h',marker_color='green'))
        config = {'displayModeBar':False}
        fig.update_layout(template='plotly_dark',margin=dict(l=10,r=10,b=10,t=10), width=260,height=280,
                        xaxis=dict(autorange=True,
                        showgrid=False,
                        ticks='',
                        showticklabels=False))
        fig.update_traces(opacity=.7)
以下是引导部分的编码方式:

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.CYBORG])
app.layout = html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    drawPic(playerEAinfo)
                ], width=1.25, style={'height':'100%', 'border':'1px black solid', 'border-color':'grey','height':'281px'}),
                dbc.Col([
                    drawText(playerEAinfo)
                ], width=2.50,style={'height':'100%','border':'1px black solid', 'border-color':'grey','width':'197px', 'height':'281px'}),
                dbc.Col([
                    drawIndicator(playerEAinfo)
                ], width=2.25,style={'height':'100%','border':'1px black solid', 'border-color':'grey', 'width':'250px', 'height':'281px'}),
                dbc.Col([
                    drawBars(playerEAinfo, 1)
                ], width=3,style={'height':'100%','border':'1px black solid', 'border-color':'grey', 'height':'281px'}),
                dbc.Col([
                    drawBars(playerEAinfo, 2)
                ], width=3,style={'height':'100%', 'border':'1px black solid', 'border-color':'grey', 'height':'281px'})
            ],no_gutters=True), # Removes spacing between cards
            dbc.Row([
                dbc.Col([
                    drawRadar(fbref_playername)
                ], width=6, style={'height':'100%', 'border':'1px black solid', 'border-color':'grey'}),
                dbc.Col([
                    drawBars(playerEAinfo, 1)
                ], width=6, style={'height':'100%', 'border':'1px black solid', 'border-color': 'grey'})
            ],no_gutters=True),
            dbc.Row([
                dbc.Col([
                    drawBars(playerEAinfo, 1)
                ], width=6, style={'height': '100%', 'border': '1px black solid', 'border-color': 'grey'}),
                dbc.Col([
                    drawBars(playerEAinfo, 1)
                ], width=6, style={'height': '100%', 'border': '1px black solid', 'border-color': 'grey'})
            ], no_gutters=True),
        ])
    )
])
它目前的样子:


我错过了什么?难道电子人主题不应该出现并将所有灰色斑点涂成黑色吗?

你必须使用类似的方法使情节透明:

fig.update_layout(plot_bgcolor='rgba(0, 0, 0, 0)',paper_bgcolor='rgba(0, 0, 0, 0)')```