如何在 Dash 中将事件处理程序设置为被动以避免跳过数据点

Question

我正在使用带 python 的破折号来绘制折线图我正在使用图表的扩展数据属性来更新轨迹以避免重新绘制图表。我面临一个问题，即图表跳过了几个数据点。我也收到了一些如下所示的控制台警告

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

我认为数据点被跳过的原因是这个警告，因为它可能会阻止调用回调。当我从图形选项卡移动到另一个选项卡时，将跳过更多数据点（假设我从图形选项卡移动到 Whosebug 选项卡）。我如何防止这种情况发生？或者如果有其他方法可以做到这一点，请随时在评论中post。

这些是发送一个数据点的屏幕截图。

仅供参考，我正在使用 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)

任何帮助将不胜感激，提前致谢。

Answer 1

Dash graph 跳过数据点的原因是它无法在指定的页面更新率下处理大量数据。解决方法是减少数据量或提高更新率。希望对您有所帮助。

如何在 Dash 中将事件处理程序设置为被动以避免跳过数据点

How to set event handler as passive in Dash plotly to avoid data points being skipped

python

plotly

plotly-dash

plotly.js

plotly-python