含多独立图表的Dash/Plotly布局如何实现Checklist持久化

问题根源 #

你的persistence失效是因为两个核心冲突：

1. 你将Checklist的value属性绑定为了回调的输出项，Dash的persistence机制默认不会作用于被回调控制输出的组件属性
2. 页面首次加载时回调会自动触发，你设置的Checklist初始值为空数组[]，回调会直接把这个空值返回，覆盖掉本地存储的持久化勾选状态，你代码里原封不动返回输入的checklist值的逻辑完全是多余操作。

解决方案 #

直接移除回调中Checklist的value输出项即可，你不需要通过回调回写Checklist的状态，它本身的交互会自动保留值，persistence也会正常生效。

修改后的代码示例 #

首先修改回调部分：

for car in cars:
    graph = 'graph-' + car
    checklist = 'checklist-' + car

    # 移除Output(checklist, 'value')，只保留figure输出
    @app3.callback(Output(graph, 'figure'),
                   Input(checklist, 'value'),
                   Input('interval-component', 'n_intervals'))
    def update_charts(checklist, n_interval, c=car):
        data = get_car_data(c)
        df = calcs_on_car_data(data)
        fig = go.Figure(go.Scatter(x=df.index, y=df['A'].values))
        # 只返回fig，不需要返回checklist值
        return fig

如果需要自定义持久化存储的范围，可以给Checklist加上persistence_type参数，可选值为memory（会话内有效）、local（跨浏览器会话长期有效）、session（当前标签页有效），按需配置即可：

dcc.Checklist(id='checklist-' + str(car),
              options=[{'label': '', 'value': 'on'}], value=[],
              persistence=True,
              persistence_type='local' # 加这行即可跨刷新稳定保留状态
)

额外可选优化 #

如果确实存在需要动态修改Checklist勾选状态的场景，又要保留persistence，可以将回调的prevent_initial_call参数设为True，避免页面加载时的首次回调覆盖持久化值：

@app3.callback(Output(checklist, 'value'),
               Output(graph, 'figure'),
               Input(checklist, 'value'),
               Input('interval-component', 'n_intervals'),
               prevent_initial_call=True) # 加这行禁止初始化触发
def update_charts(checklist, n_interval, c=car):
    # 你的原有逻辑
    return checklist, fig

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