在 dcc.Graph 中使用 extendData 的正确方法是什么？答案

【问题标题】：What is the correct way of using extendData in dcc.Graph?在 dcc.Graph 中使用 extendData 的正确方法是什么？
【发布时间】：2021-02-01 09:51:31
【问题描述】：

我正在尝试使用以下代码限制 dcc.Graph 图形绘制的点数：

import dash
import dash_html_components as html
import dash_core_components as dcc
import numpy as np

from dash.dependencies import Input, Output, State

# Example data (a circle).
resolution = 1000
t = np.linspace(0, np.pi * 2, resolution)
x, y = np.cos(t), np.sin(t)
# Example app.
figure = dict(data=[{'x': [], 'y': []}])
app = dash.Dash(__name__, update_title=None)  # remove "Updating..." from title
app.layout = html.Div([
    dcc.Graph(id='graph', figure=dict(figure)), dcc.Interval(id="interval", interval=10),
    dcc.Store(id='store', data=dict(x=x, y=y, resolution=resolution)),
])
app.clientside_callback(
    """
    function (n_intervals, data) {
        return [{x: [data.x], y: [data.y]}, [0], 10]
    }
    """,
    [Output('graph', 'extendData')],
    [Input('interval', 'n_intervals')], 
    [State('store', 'data')]
)

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

我所期望的是，当我使用return [{x: [data.x], y: [data.y]}, [0], 10] 时，末尾的 10 将图形上的点数限制为 10。虽然，当我运行示例代码时，会绘制一个完整的圆圈。根据文档，extendData 需要以下返回：

extendData (list | dict; optional): 应该附加到的数据现有的痕迹。具有 [updateData, traceIndices, maxPoints] 的形式，其中 updateData 是一个包含要扩展的数据的对象， traceIndices （可选）是一个跟踪索引数组，应该是扩展，并且 maxPoints（可选）是定义允许的最大点数或具有键值对的对象匹配 updateData 完整参考 Plotly.extendTraces API 用法： https://plotly.com/javascript/plotlyjs-function-reference/#plotlyextendtraces

是我误解了 maxPoints 参数的使用，还是我实现错误？

【问题讨论】：

标签： python plotly plotly-dash plotly-python

【解决方案1】：

你的错误很微妙，我花了一段时间才弄明白......

在你的回调装饰器中：

app.clientside_callback(
    """
    function (n_intervals, data) {
        return [{x: [data.x], y: [data.y]}, [0], 10]
    }
    """,
    [Output('graph', 'extendData')],
    [Input('interval', 'n_intervals')], 
    [State('store', 'data')]
)

由于Output 在一个列表中，您的回报也应该是一个以extendData 作为单个元素的列表。但是，您返回的是“解包”extendedData，因此 Dash 会忽略其他两个元素并仅发送 updateData={x: [data.x], y: [data.y]}。

要修复它，只需使用不在列表中的Output('graph', 'extendData')。

【讨论】：

好收获！谢谢！