Dash Plotly Textbox 回调交互

Question

我被指派与地图上的填充区域进行文本框交互。这是我的仪表板当前的样子：

所以一旦我在文本框中输入我的数字并按下提交，图形地图（位于左侧）应该根据我在 Lat1、Long1 和 Lat2、Long2 中输入的数字显示填充区域。但是，我不太确定如何在数字输入、数字以及按钮之间进行回调。我上网搜索，但我找不到任何可以阅读的资源。我对此非常陌生，因此非常感谢任何帮助！因此，如果您有任何想法，请告诉我！谢谢你:)

这是我的输入框代码：

def custom_input1(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input1'),
        ],
        style={"display": "flex"},
    )

def custom_input2(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input2'),
        ],
        style={"display": "flex"},
    )
def custom_input3(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input3'),
        ],
        style={"display": "flex"},
    )
def custom_input4(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input4'),
        ],
        style={"display": "flex"},
    )
html.Div(children=[html.Div([
          html.H1("Query1", style={'text-align': 'center','fontSize': 30}),
            dbc.Row(
                [
                    dbc.Col(dcc.Graph(id="graphQ", figure={}), md=8),
                    dbc.Col(
                        children=[
                            dbc.Row(
                                [
                                    dbc.Col(custom_input1("Lat1")),
                                    dbc.Col(custom_input2("Long1")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                            dbc.Row(
                                [
                                    dbc.Col(custom_input3("Lat2")),
                                    dbc.Col(custom_input4("Lat2")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                            html.Div(id="output"),
                            html.Button('Submit', id='submit_button', n_clicks=0),
                        ],
                        md=4,
                    ),
                ]
            ),

        ])]))

@app.callback(
    Output("output", "children"),
    Input("input1", "value"),
    Input("input2", "value"),
    Input("input3", "value"),
    Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
    return 'Lat1: {} and Long1: {}\nLat2: {} and Long2: {}'.format(input1, input2, input3, input4)

这是我的失败代码：（不太确定这是否是正确的方法哈哈……）

figt = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [{}.format(input2,input4)], lat = [{}.format(input1,input3)],
    marker = { 'size': 10, 'color': "orange" }))

figt.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

这是它应该具有的最终结果：

Answer 1

注释中的格式有点奇怪，所以这里是代码：

首先，您需要在最顶部定义一个名为纬度和经度的空列表

longitude = []
latitude = []

从那里，使用您提供的回调，您可以使用更新此列表

    @app.callback(
    Output("output", "children"),
    Input("input1", "value"),
    Input("input2", "value"),
    Input("input3", "value"),
    Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
        latitude.extend([input1,input3])
        longitude.extend([input2,input4])
        return 'Lat1: {} and Long1: {}\nLat2: {} and Long2 {}'.format(input1, input2, input3, input4)

然后像这样使用这些值：

figt = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = longitude, 
    lat = latitude,
    marker = { 'size': 10, 'color': "orange" }))

figt.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

您可以使用link在点/轨迹之间填充