如何使用按钮单击事件从 Plotly Dash 中的字段捕获文本输入？

Question

我只想在按下按钮时使用我在后台程序的字段中输入的内容。

app.layout = html.Div([html.Div(
    [
        html.H1('K7'),
        dcc.Graph(id="graph", style={'width': '100vw', 'height': '70vh'}),
    ]),
    html.Div(
        [
            dcc.Input(
                id="input_symbol",
                value="TJX",
                type="text",
                placeholder="SYMBOL",
                style={'width': '10vw', 'height': '3vh'}
            ),
            dcc.Input(
                id="input_resolution",
                value="D",
                type="text",
                placeholder="RESOLUTION",
                style={'width': '10vw', 'height': '3vh'}
            )
        ])
])


@app.callback(
    Output("graph", "figure"),
    Input('input_symbol', 'value'),
    Input('input_resolution', 'value'))

现在，当它在那里设置时，当我点击离开时它会捕获该字段。感谢所有帮助。

谢谢

我发现 Plotly Dash 文档令人困惑。我实现了我展示的例子，但我真的不知道如何用按钮来做。

Answer 1

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div(
        [
            html.H1('K7'),
            dcc.Graph(id="graph", style={'width': '100vw', 'height': '70vh'}),
        ]
    ),
    html.Div(
        [
            dcc.Input(
                id="input_symbol",
                value="TJX",
                type="text",
                placeholder="SYMBOL",
                style={'width': '10vw', 'height': '3vh'}
            ),
            dcc.Input(
                id="input_resolution",
                value="D",
                type="text",
                placeholder="RESOLUTION",
                style={'width': '10vw', 'height': '3vh'}
            ),
            html.Button('Push Me!', id='button'),
        ]
    )
])

@app.callback(
    Output("graph", "figure"),
    Input('button', 'n_clicks'),
    State('input_symbol', 'value'),
    State('input_resolution', 'value')
)
def update_figure(n_clicks, symbol, resolution):
    # Do something with symbol and resolution here
    # For example, you can use them as parameters to call a function that generates a plot
    # The resulting plot can be returned as a dictionary to update the 'figure' property of the 'graph' component
    figure = {'data': [], 'layout': {}}
    return figure

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

在这个例子中，我在你的布局中添加了一个按钮，并创建了一个回调函数，当点击按钮时触发。该函数将“input_symbol”和“input_resolution”字段的值作为输入并对它们进行处理（在本例中，它生成一个图并将其作为字典返回以更新“图形”组件的“图形”属性).按钮点击事件用作回调函数的触发器。

您可以修改“update_figure”函数以使用字段中输入的值执行您想要的任何操作。请记住用您的操作结果更新适当的组件属性。