Plotly Dash 如何通过滑块获取用户输入以更新绘图中的值

Question

我有一个输出变量 (REC2)，它与许多固定因素和一个输入变量 (REC1) 成反比。我的原始代码采用固定因子和 REC1（硬编码）并计算 REC2。这部分按我的意愿工作。

然后我从 Ploty Dash 网站上抄袭了以下代码。绘图正确显示，但滑块没有。我认为这是“标记”线，但我不知道如何设置它。我希望它以 50 为步长从 0 变为 -2000。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go


Dep=363                 #Water depth (m)
Speed = 2.2             #Ship's speed (m/s)
ASV=1.5                 #Speed of sound in water (m/s)
SPI=6.25                #Distance between sample stations (m)
SB=0-((Dep*2)/ASV)      #Sound travel time to seabed (milliseconds) - negative to denote below time zero
IET=(SPI/Speed)         #Inter Event Time (s) time to travel SPI

Rmin=0
Rmax=-2000


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='3DHR Slider',
        min=Rmax,
        max=Rmin,
        value=(Rmax-Rmin)/2,
        marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(-20000,0)},
        step=200
    )
])


@app.callback(
    Output('graph-with-slider', 'figure'),
    Input('3DHR Slider', 'value'))
def update_figure(REC1):
    REC2= ((0-IET)*1000)-REC1  #UHRS record length - Function of above

    fig = go.Figure()
    fig.add_trace(go.Scatter(
        x=[0, 1,1, 0],
        y=[0, 0, REC2, REC2],
        fill='tonexty', # fill area between trace0 and trace1
        mode='lines', line_color='indigo',name="UHRS"))
    fig.add_trace(go.Scatter(
        x=[0, 1,1, 0],
        y=[0, 0, REC1, REC1],
        fill='tonexty', # fill area between trace0 and trace1
        mode='lines', line_color='blue',name="3DHR"))
    
    fig.add_trace(go.Scatter(x=[0,1],y=[SB,SB],name="Seabed"))

    return fig


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

Answer 1

我已更新为在 jupyter 环境中工作。

• 您正在为 -2000 和 0 之间的每个值创建一个标记。然后这些值重叠，您会得到一条黑线作为标记
• 将 dict 理解更改为每 200 次创建标记
• 已将 滑块 步长更改为 50，如您所记

import dash
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objects as go


Dep=363                 #Water depth (m)
Speed = 2.2             #Ship's speed (m/s)
ASV=1.5                 #Speed of sound in water (m/s)
SPI=6.25                #Distance between sample stations (m)
SB=0-((Dep*2)/ASV)      #Sound travel time to seabed (milliseconds) - negative to denote below time zero
IET=(SPI/Speed)         #Inter Event Time (s) time to travel SPI

Rmin=0
Rmax=-2000


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
#     dcc.Graph(id='graph-with-slider'),
    dcc.Slider(
        id='3DHR Slider',
        min=Rmax,
        max=Rmin,
        value=(Rmax-Rmin)/2,
        marks={i: f"DHR {i}" for i in range(-20000,0, 200)},
        step=50
    ),
    html.Div(id="sliderVal")
])

@app.callback(
    Output("sliderVal", "children"),
    Input('3DHR Slider', "value")
)
def useSlider(dhrSlider):
    return dhrSlider

app.run_server(mode="inline")