Plotly：带有实时图形的Dash按钮不起作用

Question

我开发了基于python dash的应用程序进行监控。作为项目的一部分，我想显示实时图表并根据用户输入更改实时图表值。我被困在这一部分。当我开始输入输入框（例如：temp）时，实时图表会更新，图表会继续更新每个字母，如t，te，tem，temp。所以我创建了一个提交输入值的按钮。仍然是每个字母的图表更新。

代码相同：

app = dash.Dash(__name__)
app.layout = html.Div(
    [ 
    dcc.Input(id='input-value', value='example', type='text'),
    html.Button('Submit', id="submit-button"),
    dcc.Graph(id='live-graph', animate=False),
    dcc.Interval(
        id='graph-update',
        interval=1*1000
    ),
]
)

回拨功能如下

@app.callback(Output('live-graph', 'figure'),
          [Input('submit-button','n_clicks')],
          state=[State(component_id='sentiment_term', component_property='value')],
          events=[Event('graph-update', 'interval')])

def update_graph_scatter(n_clicks, input_value):
    conn = sqlite3.connect('database.db')
    c = conn.cursor()
    df = pd.read_sql("SELECT * FROM table WHERE colume LIKE ? ORDER BY unix DESC LIMIT 1000", conn ,params=('%' + input_value+ '%',))
    df.sort_values('unix', inplace=True)

    df['date'] = pd.to_datetime(df['unix'],unit='ms')
    df.set_index('date', inplace=True)

    X = df.index
    Y = df.column

    data = plotly.graph_objs.Scatter(
            x=X,
            y=Y,
            name='Scatter',
            mode= 'lines+markers'
           )

    return {'data': [data],'layout' : go.Layout(xaxis=dict(range=   [min(X),max(X)]),
                                            yaxis=dict(range=[min(Y),max(Y)])}

注意：如果我删除了间隔按钮开始工作。但我想要实时更新以及按钮

Answer 1

您可以使用像div这样的中间组件来保存文本字段中的输入，并仅在按钮单击时更新该div。所以你会的

app = dash.Dash(__name__)
app.layout = html.Div([ 
    dcc.Input(id='input-value', value='example', type='text'),
    html.Div(['example'], id='input-div', style={'display': 'none'}),
    html.Button('Submit', id="submit-button"),
    dcc.Graph(id='live-graph', animate=False),
    dcc.Interval(
        id='graph-update',
        interval=1*1000
    ),
])

现在只在按钮点击时更新div：

@app.callback(Output('input-div', 'children'),
              [Input('submit-button', 'n_clicks')],
              state=[State(component_id='input-value', component_property='value')])
def update_div(n_clicks, input_value):
    return input_value

并且Graph总是使用div内容来查询数据库（当间隔触发或div更改时）：

@app.callback(Output('live-graph', 'figure'),
              [Input('graph-update', 'interval'),
               Input('input-div', 'children')])
def update_graph_scatter(n, input_value):
    ...

Answer 2

你确定每个字母的更新是由于输入？听起来像是时间间隔使用您输入的未完成输入更新图形。

P.S。：我猜你的输入和状态ID之间存在名称差异。