Dash双回调失效求助：添加标题颜色回调后图表空白

问题出在多个回调同时输出到同一个dcc.Graph的figure属性，两个回调会互相覆盖对方生成的图表对象，导致页面无法渲染出完整的柱状图。

要同时实现图表宽度实时调整和标题颜色修改，需要将两个功能合并到单个回调中，确保每次回调都生成包含所有设置的完整图表对象。

正确实现代码示例 #

import dash
from dash import dcc, html, Input, Output
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

# 示例数据
data = pd.DataFrame({
    'Category': ['A', 'B', 'C', 'D'],
    'Value': [10, 20, 15, 25]
})

app.layout = html.Div([
    html.H3("图表控制面板"),
    # 宽度调整滑块
    dcc.Slider(
        id='width-slider',
        min=500,
        max=1200,
        value=800,
        step=50,
        marks={500: '500', 800: '800', 1200: '1200'}
    ),
    # 标题颜色输入框
    dcc.Input(
        id='title-color-input',
        type='text',
        placeholder='输入颜色（如red/ #FF0000）',
        value='blue'
    ),
    # 目标柱状图
    dcc.Graph(id='bar-chart')
])

# 合并后的回调：同时处理宽度调整与标题颜色修改
@app.callback(
    Output('bar-chart', 'figure'),
    [Input('width-slider', 'value'),
     Input('title-color-input', 'value')]
)
def update_chart(width, title_color):
    # 创建基础柱状图
    fig = px.bar(data, x='Category', y='Value', title='示例柱状图')
    # 应用宽度设置
    fig.update_layout(width=width)
    # 应用标题颜色设置
    fig.update_layout(title_font_color=title_color)
    return fig

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

核心逻辑说明 #

1. 将两个控件（宽度滑块、颜色输入框）都作为回调的输入源，任意控件变化时都会触发回调
2. 在回调函数中一次性生成完整的图表对象，同时设置宽度和标题颜色属性
3. 避免了多个回调对同一figure属性的覆盖冲突，确保页面能正常渲染出包含所有设置的图表

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