python - 如何在 Dash plotly 中将事件处理程序设置为被动以避免数据点被跳过
问题描述
我在 python 中使用 dash plotly 来绘制折线图 我正在使用图形的 extendData 属性来更新轨迹以避免重绘图形。我面临的问题是图表跳过了几个数据点。我还收到一些控制台警告,如下所示
async-plotlyjs.v1_16_0m1617903285.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
async-plotlyjs.v1_16_0m1617903285.js:2 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
我认为跳过数据点的原因是这种警告,因为它可能会阻止回调被调用。当我从图形选项卡移动到另一个选项卡时,更多数据点被跳过(假设我从图形选项卡移动到 StackOverflow 选项卡)。我该如何防止这种情况发生?或者如果有其他方法可以做到这一点,请随时在评论中发布。
这些是它运送一个数据点的屏幕截图。
仅供参考,我使用的是 Google Chrome 版本 92.0.4515.107(官方版本)(64 位),但问题在其他浏览器上也持续存在。
下面提到的是代码
import random
import webbrowser
import dash
import dash_bootstrap_components as dbc
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, State
app = dash.Dash(__name__,suppress_callback_exceptions=True)
app.layout = html.Div([
dbc.Row([
dbc.Col([
dcc.Graph(
id='graph-voltage',
figure={
'layout': {
'title': 'Voltage',
'xaxis': {
'title': 'Time'
},
'yaxis': {
'title': 'Voltage in V',
'range': [0, 5],
}
},
'data': [{'name': 'Cell 01', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 02', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 03', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 04', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 05', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 06', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 07', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 08', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 09', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 10', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 11', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 12', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 13', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 14', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 15', 'type': 'line', 'x': [], 'y': []},
{'name': 'Cell 16', 'type': 'line', 'x': [], 'y': []},
]
}
),
], ),
]),
dcc.Interval(
id='interval-graph-update',
interval=0.5 * 1000,
n_intervals=0),
])
@app.callback(Output('graph-voltage', 'extendData'),
[Input('interval-graph-update', 'n_intervals')]
)
def extend_single_trace(n_intervals):
CVT_CELL1 = np.array([])
CVT_CELL2 = np.array([])
CVT_CELL3 = np.array([])
CVT_CELL4 = np.array([])
CVT_CELL5 = np.array([])
CVT_CELL6 = np.array([])
CVT_CELL7 = np.array([])
CVT_CELL8 = np.array([])
CVT_CELL9 = np.array([])
CVT_CELL10 = np.array([])
CVT_CELL11 = np.array([])
CVT_CELL12 = np.array([])
CVT_CELL13 = np.array([])
CVT_CELL14 = np.array([])
CVT_CELL15 = np.array([])
CVT_CELL16 = np.array([])
CVT_TIME_STAMP = np.array([])
CVT_CELL1 = np.append(CVT_CELL1, random.randint(0,5))
CVT_CELL2 = np.append(CVT_CELL2, random.randint(0,5))
CVT_CELL3 = np.append(CVT_CELL3, random.randint(0,5))
CVT_CELL4 = np.append(CVT_CELL4, random.randint(0,5))
CVT_CELL5 = np.append(CVT_CELL5, random.randint(0,5))
CVT_CELL6 = np.append(CVT_CELL6, random.randint(0,5))
CVT_CELL7 = np.append(CVT_CELL7, random.randint(0,5))
CVT_CELL8 = np.append(CVT_CELL8, random.randint(0,5))
CVT_CELL9 = np.append(CVT_CELL9, random.randint(0,5))
CVT_CELL10 = np.append(CVT_CELL10, random.randint(0,5))
CVT_CELL11 = np.append(CVT_CELL11, random.randint(0,5))
CVT_CELL12 = np.append(CVT_CELL12, random.randint(0,5))
CVT_CELL13 = np.append(CVT_CELL13, random.randint(0,5))
CVT_CELL14 = np.append(CVT_CELL14, random.randint(0,5))
CVT_CELL15 = np.append(CVT_CELL15, random.randint(0,5))
CVT_CELL16 = np.append(CVT_CELL16, random.randint(0,5))
CVT_TIME_STAMP = np.append(CVT_TIME_STAMP, n_intervals)
return (dict(x=[CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP,
CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP,
CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, CVT_TIME_STAMP, ],
y=[CVT_CELL1, CVT_CELL2, CVT_CELL3, CVT_CELL4, CVT_CELL5, CVT_CELL6, CVT_CELL7, CVT_CELL8, CVT_CELL9,
CVT_CELL10, CVT_CELL11, CVT_CELL12, CVT_CELL13, CVT_CELL14, CVT_CELL15, CVT_CELL16],
)
)
if __name__ == "__main__":
webbrowser.open('http://127.0.0.1:5050/')
app.run_server(port=5050, debug=True, use_reloader=False)
任何帮助将不胜感激,在此先感谢。
解决方案
推荐阅读
- swift - VNDetectFaceRectanglesRequest 没有调用 completionHandler
- dart - flutter 获取布局渲染事件
- unicode - 为什么 NFKC 规范化会丢失上标和下标信息?
- c++ - 为什么基指针可以访问虚函数中的派生成员变量
- sql - 根据最新日期和 SQL Server 2008 R2 中的不同列获取表的最新行
- c# - 在没有静态引用的静态方法中修改另一个类中的类属性
- javascript - 使用第二个 jquery 请求上传文件
- amazon-web-services - 将 robots.txt 文件放入 S3 存储桶
- python - 基于多个键或多个键组合或合并字典
- javascript - Heroku Rails JS管道问题