间隔可以更新数据但图不更新？ dash中是否有刷新频率限制？答案

【问题标题】：Interval can update the data but figure not updated? Is there any refresh frequency limit in dash?间隔可以更新数据但图不更新？ dash中是否有刷新频率限制？
【发布时间】：2018-03-21 12:28:14
【问题描述】：

首先非常感谢 Dash 帮助我完成了网络应用程序中的交互式绘图。

最近我在做一个需要经常更新数据的应用。

应用程序现在可以从 mysql 获取数据并更新数据和图形。问题是我将间隔设置为 10 秒，而每 10 秒我也可以看到数据是在服务器中实现和计算的，但该数字只能在大约每 1 分钟到 50 秒后随机更新。

每隔 10 秒，我可以在站点点击时看到更新，但直到 50 秒或 1 分钟，数字才会更新。

此外， mysql服务器是本地的，查询时间快2.3ms左右。计算时间约为100毫秒。

这是我的应用程序的大部分代码。

""" app plotly dash"""
import dash
from dash.dependencies import Input, Output, State, Event
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import numpy as np
import time
import sys
import datetime as dt
import matplotlib
matplotlib.use(“Agg”)
import matplotlib.pylab as plt
import base64
from login import server as server
import json

def global_store(data, strings):
    global_data = [v for i,v in enumerate(data)]
    print(‘Computing value…’)
    return [global_data, strings]

app = dash.Dash(name=‘app’, server=server, csrf_protect=False, 
    url_base_pathname=’/app’)

app.layout = html.Div([
html.Div([

    dcc.Interval(
        id='interval-component',
        interval=5*60*60*1000, # in milliseconds
        n_intervals=0
    ),

  html.Button(id='run', n_clicks=0, children='Run'),

  html.Div(id='signal', style={'display': 'none'}),
  html.Div(id='div-error'),
  ], style={'display': 'inline-block', 'textAlign': 'center', 
'marginLeft':'27%', 'marginTop':0}),

html.Div([
dcc.Slider(id='index-slider3', min=0, max=loops, value=0, step=1,),
], style={'width': '35%'}),

# Graphs

html.Div([
    html.H5("Waveform 1", style={'display': 'inline-block', 'marginLeft': 300}),
    dcc.Graph(id='fig1', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0}),],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),

html.Div([
    html.H5("Waveform 2", style={'display': 'inline-block', 'marginLeft': 300}),
    dcc.Graph(id='fig2', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),

html.Div([
    html.H5("Waveform 3", style={'display': 'inline-block', 'marginLeft': 300}),
    dcc.Graph(id='fig3', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
style={'width': '60%', 'display': 'inline-block','marginTop': 0}),

html.Div([
    html.H5("Waveform 4", style={'display': 'inline-block', 'marginLeft': 300}),
    html.Img(id='fig4', style={'width':850, 'height': 450, 'marginTop':0, 'marginBottom':0})],
    style={'width': '60%', 'display': 'inline-block','marginTop': 0}),
])

@app.callback(Output(‘interval-component’, ‘interval’),
[Input(‘run’, ‘n_clicks’)])
def disable_interval(n_clicks):
    if n_clicks%2 == 0:
        return 106060*1000
    else:
        return 10 * 1000

@app.callback(Output(‘signal’, ‘children’),
[Input(‘interval-component’, ‘n_intervals’)],)
def compute_value(n_intervals):
    datas = np.random.randint(1000, size=5000)
    datass = np.random.randint(2, size=(5000,5000))
    plt.figure(figsize=(8, 6))
    plt.pcolormesh(datas [0:10], datass [10:100], datas [10:100,0:10])
    plt.colorbar()
    plt.title(‘Waveform at time: 
    {}.’.format(dt.datetime.now().strftime(’%c’)))
    plt.savefig(‘spectrum.png’)
    image_filename = ‘wave4.png’ # replace with your own image
    encoded_image = base64.b64encode(open(image_filename, ‘rb’).read())
    base64_string = encoded_image.decode(‘utf-8’)
    global_data = global_store(datas, base64_string)
    return json.dumps(global_data)

@app.callback(Output(‘div-error’, ‘children’), [Input(‘signal’, 
‘children’)], [], [Event(‘interval-component’, ‘interval’)])
def update_error(data):
      if ‘data’ in data:
           return data

@app.callback(Output(‘fig1’, ‘figure’), [Input(‘signal’, ‘children’)], [], 
[Event(‘interval-component’, ‘interval’)])
def update_figure1(data):
    data = json.loads(data)
    traces = []
    traces.append(go.Scatter(
    x=list(range(len(data[0]))),
    y=data[0],
    mode=‘lines’,#+markers’,
    opacity=0.7,
    ))
    return {
‘data’: traces,
‘layout’: go.Layout(
title=‘Waveform1’,
xaxis={‘title’: ‘Index’},
legend={‘x’: 0, ‘y’: 1},
hovermode=‘closest’
)
}

@app.callback(Output(‘fig2’, ‘figure’), [Input(‘signal’, ‘children’)], [], 
[Event(‘interval-component’, ‘interval’)])
def update_figure2(data):
    data = json.loads(data)
    traces = []
    traces.append(go.Scatter(
    x=list(range(len(data[0]))),
    y=data[0],
    mode=‘lines’,
    opacity=0.7,
    ))
    return {
    ‘data’: traces,
    ‘layout’: go.Layout(
    title=‘Waveform2’,
    legend={‘x’: 0, ‘y’: 1},
    hovermode=‘closest’
    )
    }

@app.callback(Output(‘fig3’, ‘figure’), [Input(‘signal’, ‘children’)], [], 
 [Event(‘interval-component’, ‘interval’)])
def update_figure5(data):
    data = json.loads(data)
    traces = []
    traces.append(go.Scatter(
    x=list(range(len(data[0]))),
    y= np.array(data[0]) * np.array(data[0]),
mode=‘line’,
name=“Power”,
))
return {
‘data’: traces,
‘layout’: go.Layout(
title=‘Waveform3’,
legend={‘x’: 0, ‘y’: 1},
hovermode=‘closest’
)
}

@app.callback(Output(‘fig4’, ‘src’), [Input(‘signal’, ‘children’)], [], [Event(‘interval-component’, ‘interval’)])
def update_figure6(data):
data = json.loads(data)
image = data[1]
return ‘data:image/png;base64,{}’.format(image.encode(‘utf-8’).decode())

if name == ‘main’:
app.run_server(host=‘0.0.0.0’, port=9000, debug=True)
# app.run_server()

” 这是服务器端的输出：

计算价值... 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - Theta 为：-0.30832596184310135 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:08] “POST /app2_dash-update-component HTTP/1.0” 200 - 4096.0 计算值… 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - Theta 为：-0.17874378214618614 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:18] “POST /app2_dash-update-component HTTP/1.0” 200 - 4096.0 计算值… 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - Theta 为：-0.17874378214618614 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:28] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:29] “POST /app2_dash-update-component HTTP/1.0” 200 - 127.0.0.1 - - [20/Mar/2018 16:50:29] “POST /app2_dash-update-component HTTP/1.0” 200 -

啊，这是控制台中的一个警告：

/home/mo/anaconda3/envs/tf35/lib/python3.5/site-packages/matplotlib/pyplot.py:537：运行时警告：

已打开 20 多个人物。通过创建的数字 pyplot 接口（matplotlib.pyplot.figure）被保留到显式关闭，可能会消耗太多内存。（为了控制这个警告，请参阅 rcParam 图.max_open_warning)。

我个人认为这意味着每10秒计算一次数据和图像，但数字仍然不是每10秒更新一次。

你能帮我解决这个问题吗？非常感谢。此外，我想将间隔设置为 0.5 秒，有没有更好的方法来进行频繁更新？

参考：https://community.plot.ly/t/help-interval-can-update-the-data-but-figure-not-updated-is-there-any-refresh-frequency-limit-in-dash/9089

【问题讨论】：

标签： html python-3.x plotly plotly-dash

【解决方案1】：

最后我发现问题是由数据库延迟引起的。数据库仅每 1 分钟更新一次数据。

【讨论】：