如何使用 Bootstrap 将 Plotly 图形主题与 Dash 仪表板的背景颜色匹配？

Question

我正在努力使用 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),
        ])
    )
])

目前的样子：

我错过了什么？ CYBORG 主题不应该启动并将所有灰色点涂成黑色吗？

Answer 1

你必须使用这样的东西来使情节透明：

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