Dash回调中State获取的figure为dict而非go.Figure的原因疑问

为什么State中的figure是dict类型？ #

Dash在组件间传递数据时，会自动把plotly.graph_objects.Figure对象序列化为JSON格式的字典，所以作为State传入回调的figure参数本质是figure对象的字典表示，而非原始的Figure实例。

为什么用go.Figure(figure)返回后无效果？ #

问题出在Python的闭包特性上：在循环中定义回调函数时，所有回调会共享同一个employee_id变量的最终值（也就是循环结束后的3），而非每个循环迭代时的当前值。这导致你用go.Figure(figure)更新后，实际修改的是最后一个图表的figure，而非当前循环对应的图表，所以看起来没有效果。

正确的解决方案 #

要解决这个问题，需要确保每个回调函数绑定到当前循环的employee_id值，同时正确处理dict格式的figure：

方法1：使用工厂函数创建回调 #

通过工厂函数捕获当前迭代的ID，避免闭包变量共享问题，同时可以正常使用Plotly的Figure API：

import random
import plotly.graph_objects as go
from dash import Dash, Input, Output, State, dcc, html

employees = [{'name': 'John', 'age': 20}, {'name': 'Jane', 'age': 21}, {'name': 'Joe', 'age': 22}]

app = Dash(__name__) 
employee_cards = [] 

def create_update_callback(emp_id):
    def update_graph_live(n_intervals, figure_dict):
        # 将dict转换为Figure实例
        fig = go.Figure(figure_dict)
        # 使用Plotly的API更新图表
        fig.update_traces(y=[random.randint(0, 100) for _ in range(3)])
        # 返回时Dash会自动序列化为dict
        return fig
    return update_graph_live

for idx, employee in enumerate(employees, start=1):
    fig = go.Figure()
    fig.add_trace(go.Scatter(y=[], name=f'Line{idx}'))

    employee_cards.append(html.Div([
        html.H3(employee['name']),
        html.P(employee['age']),
        dcc.Graph(
            id=f'graph{idx}',
            figure=fig
        ),
        dcc.Interval(
            id=f'interval{idx}',
            interval=1*1000, # 毫秒
            n_intervals=0
        ),
    ]))

    # 使用工厂函数创建回调，绑定当前的idx
    app.callback(
        Output(f'graph{idx}', 'figure'),
        Input(f'interval{idx}', 'n_intervals'),
        State(f'graph{idx}', 'figure')
    )(create_update_callback(idx))

app.layout = html.Div([
    html.H1('Hello Dash'),
    html.Div(employee_cards)
])

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

方法2：直接操作dict格式的figure（原代码改进） #

如果你想继续直接操作dict，同样需要解决闭包变量问题，修改循环中的回调定义方式：

# 替换原循环中的回调部分
for idx, employee in enumerate(employees, start=1):
    # ... 其他代码保持不变 ...
    
    # 使用lambda捕获当前idx，注意要把idx作为默认参数传入
    @app.callback(
        Output(f'graph{idx}', 'figure'),
        Input(f'interval{idx}', 'n_intervals'),
        State(f'graph{idx}', 'figure')
    )
    def update_graph_live(n_intervals, figure, emp_id=idx):
        figure['data'][0]['y'] = [random.randint(0, 100) for _ in range(3)]
        return figure

关键要点总结 #

• Dash传递的figure是序列化后的字典，需要手动转换为go.Figure实例才能使用Plotly的API。
• 循环中定义回调时，必须通过工厂函数或默认参数捕获当前迭代的变量值，否则所有回调会共享变量的最终值。
• 返回go.Figure实例时，Dash会自动将其序列化为字典传递给前端，无需手动转换。

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