使用回调更新时 plotly.scatter 图形不会重置（python dash）答案

【问题标题】：plotly.scatter figure doesnt reset when updating with callback (python dash)使用回调更新时 plotly.scatter 图形不会重置（python dash）
【发布时间】：2022-07-02 00:00:50
【问题描述】：

我有以下问题：

我尝试绘制一个结合破折号的 plotly.scatter 图，它应该可以通过使用回调的滑块进行更改。我搜索了 dash 和 plotly 的文档，找到了一些基本和高级回调以及 Sliders 的示例

https://dash.plotly.com/basic-callbacks

https://dash.plotly.com/advanced-callbacks

https://dash.plotly.com/dash-core-components/slider

滑块正在工作，显示的数据也在发生变化，但即使我重新加载页面，旧图也不会消失。不知道问题出在html组件还是回调中。

from math import cos,sin,radians
import numpy as np
import plotly.graph_objects as go
import plotly.express as px
from dash import Dash, dcc, html, Input, Output, callback
import pandas as pd

我跳过回调中未调用的计算，因为我很确定问题不存在，但如果你愿意，我也可以提供。

def s_out(XTvar, YTvar, ZTvar, XCvar, YCvar, ZCvar):
    for a in np.linspace(0,360,3600):
        s1i=cos(radians(a))
        s2i=sin(radians(a))
        fe=fE_tsaiwu((s1i,s2i,0,0,0,0),getm(XTvar, YTvar, ZTvar, XCvar, YCvar,ZCvar))
        s1.append(s1i/fe)
        s2.append(s2i/fe)
    return s1, s2

s1, s2 = s_out(XTvar, YTvar, ZTvar, XCvar, YCvar, ZCvar)

带有回调的 HTML 组件：
（我发现甚至不需要初始化 Div 中的数字）

app = Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='Tsai',
        # figure=fig
        figure = {}
    ),
    html.H3(children='XTvar'),
    html.H5(children='Der Wert des Sliders wird hier direkt unter dem momentanen Punkt angezeigt'),
    dcc.Slider(
        id= "XTvar",
        min = 1,
        max = 1500,
        value = 1000,
           tooltip={"placement": "bottom", "always_visible": True}
    ),
    html.H3(children='YTvar'),
    dcc.Slider(
        id= "YTvar",
        min = 1,
        max = 50,
        value = 40,
    ),
    html.H3(children='ZTvar'),
    dcc.Slider(
        id= "ZTvar",
        min = 1,
        max = 50,
        value = 40,
    ),
    html.H3(children='XCvar'),
    dcc.Slider(
        id= "XCvar",
        min = 500,
        max = 1000,
        value = 700,
    ),
    html.H3(children='YCvar'),
    dcc.Slider(
        id= "YCvar",
        min = 100,
        max = 150,
        value = 120,
    ),
    html.H3(children='ZCvar'),
    dcc.Slider(
        id= "ZCvar",
        min = 100,
        max = 150,
        value = 120,
    )
])
@app.callback(
    Output(component_id='Tsai', component_property='figure'),
    Input(component_id='XTvar', component_property='value'),
    Input(component_id='YTvar', component_property='value'),
    Input(component_id='ZTvar', component_property='value'),
    Input(component_id='XCvar', component_property='value'),
    Input(component_id='YCvar', component_property='value'),
    Input(component_id='ZCvar', component_property='value')
)
def updatefigure(XTvar, YTvar, ZTvar, XCvar, YCvar, ZCvar):
    df = zip(s_out(XTvar, YTvar, ZTvar, XCvar, YCvar, ZCvar))
    fig = px.scatter(df,s1, s2)
    return fig

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

在这里你可以看到如果我移动其中一个滑块会发生什么。

感谢您的各种帮助，我希望问题得到很好的描述。

【问题讨论】：

标签： python callback plotly plotly-dash

【解决方案1】：

您的破折号回调中的逻辑不完整。

如果您在移动滑块后查看s1, s2，您会发现每次移动滑块时它们的长度都会增加 3600，因为您在每次调用回调后都不会清除 s1, s2。

因此，每次移动滑块时，都会通过将新值附加到 s1, s2! 来绘制新的日食！

以下是对您的代码的一些建议，以避免这种行为。

避免在代码中定义像s1, s2 = s_out(XTvar, YTvar, ZTvar, XCvar, YCvar, ZCvar) 这样的全局变量。全局变量是 Dash 应用程序中的缓存，它的值会一直存在，直到您终止调试会话。在 Dash 中，我们几乎无法控制它们。有关详细信息，请参阅Dash Documentation。如果需要在回调之间缓存一些值，请使用dcc.Store
使用 Dash 内置调试器查看回调中的内容。跟踪更复杂的回调可能很有用。

【讨论】：