如何使Dash Plotly图表对象周边区域匹配仪表盘深色主题？

问题描述 #

我正在开发首个Dash Plotly指标仪表盘，目前已为仪表盘大部分区域设置了深色主题，但Plotly图表对象的周边区域未同步深色主题。请问如何让该图表周边区域与仪表盘其余部分的深色主题保持一致？

解决方案 #

要让图表周边区域和仪表盘深色主题统一，需要从三个核心点调整：

• 同步图表画布背景色：Plotly图表分为绘图区域（plot_bgcolor）和整个画布区域（paper_bgcolor），你目前仅设置了前者，需将后者也设为深色。
• 调整图表文字颜色：深色背景下需把坐标轴标签、图例等文字设为浅色，保证内容可读性。
• 统一组件容器样式：确保dcc.Graph组件本身的背景与仪表盘主题匹配，消除浅色空隙或边框。

关键修改代码 #

图表布局更新

fig1 = go.Figure(data=[
    go.Bar( name='MAPE', x=bl['GLBL_BUS_LN_DESC'], y=bl['MAPE']),
    go.Bar(name='BIAS', x=bl['GLBL_BUS_LN_DESC'], y=bl['BIAS'])
])
# 同时设置绘图区、画布背景色，以及全局文字颜色
fig1.update_layout(
    barmode='group',
    plot_bgcolor='rgb(0,0,0)',
    paper_bgcolor='rgb(0,0,0)',
    font_color='white'
)

dcc.Graph组件样式调整

dcc.Graph(
    id='Business Line MAPE',
    figure=fig1,
    style={'backgroundColor': '#000000', 'padding': '10px'}
),

完整修改后的代码 #

import dash
from dash import Dash, dcc, dash_table
import dash_bootstrap_components as dbc
import dash_design_kit as ddk
from dash import html
import plotly.express as px
import plotly.graph_objects as go
import plotly.io as pio
from google.cloud import bigquery
import pandas as pd
import numpy as np
import os
from google.oauth2 import service_account

df = query_job.to_dataframe()
df['dmand_month'] = pd.to_datetime(df['dmand_yr_mo']).dt.month
df.loc[:, 'price'] = df.loc[:, 'sales_dollars']/df.loc[:, 'ord_qty']
df.loc[:, 'predicted_sales'] = np.round(df.loc[:, 'predictions']*df.loc[:, 'price'])
df.loc[:, 'diff'] = np.round(np.abs(np.round(df.loc[:, 'predicted_sales'] - df.loc[:, 'sales_dollars'],2)))
# BUSINESS LINE
bl = df.groupby(['location_type', 'GLBL_BUS_LN_DESC']).agg({'ord_qty':'sum',
                                        'predictions':'sum',
                                        'sales_dollars':'sum',
                                        'predicted_sales':'sum', 
                                        'diff':'sum'}).reset_index()
bl.replace([np.inf, -np.inf], np.nan, inplace=True)
bl['sales_dollars'] = np.round(bl['sales_dollars'])
bl.dropna(inplace = True)
bl.loc[:, 'MAPE'] = np.round(np.round(bl.loc[:, 'diff']/ bl.loc[:, 'sales_dollars'], 4) * 100,2)
bl.loc[:, 'BIAS'] = np.round(np.round((bl.loc[:,'predicted_sales']- bl.loc[:, 'sales_dollars'])/ bl.loc[:, 'sales_dollars'], 4) * 100,2)


fig1 = go.Figure(data=[
    go.Bar( name='MAPE', x=bl['GLBL_BUS_LN_DESC'], y=bl['MAPE']),
    go.Bar(name='BIAS', x=bl['GLBL_BUS_LN_DESC'], y=bl['BIAS'])
])
# 更新布局，同步深色背景与文字颜色
fig1.update_layout(
    barmode='group',
    plot_bgcolor='rgb(0,0,0)',
    paper_bgcolor='rgb(0,0,0)',
    font_color='white'
)

colors = {
    'background': '#000000',
    'text': '#111111'
}
# 初始化应用
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.DARKLY])

# 设置应用布局
app.layout = html.Div(children=[
    html.H1('Demand Forecasting Model Overview',style={
            'textAlign': 'center'}),
    html.Div(children='''
        Dash: A web application to help assess predictors for future demand forecasting models.
    ''', style={
            'textAlign': 'center'}),
    html.Br(),
    dcc.Dropdown(options = [{'label':'home_delivery', 'value':'home_delivery'},
                 {'label': 'shop_sales', 'value':'shop+sales'}],
                  id='location-dropdown'),
    # 为Graph组件添加深色背景样式
    dcc.Graph(
        id='Business Line MAPE',
        figure=fig1,
        style={'backgroundColor': '#000000', 'padding': '10px'}
    ),
    html.H2(children='Demand Forecast by Business Line', style={
            'textAlign': 'center'}),
    dash_table.DataTable(
    data=bl.to_dict('records'),
    columns=[{'id': c, 'name': c} for c in bl.columns],

    style_header={
        'backgroundColor': 'rgb(30, 30, 30)',
        'color': 'white'
    },
    style_data={
        'backgroundColor': 'rgb(50, 50, 50)',
        'color': 'white'
    },
)
    # dcc.Graph(id='Business Line BIAS', figure=fig2),
    # dcc.Graph(id='Month', figure=fig_month)
])

if __name__ == '__main__':
    app.run_server(debug=True)

补充说明 #

• paper_bgcolor控制图表整个画布（包括坐标轴外侧空白区域）的背景色，与plot_bgcolor统一后可让图表整体融入仪表盘深色主题。
• font_color统一设置图表内所有文字为白色，避免深色背景下文字模糊不清。
• dcc.Graph的style属性确保组件容器无浅色空隙，完全匹配仪表盘背景。

内容的提问来源于stack exchange，提问作者JordanBH