Dash JavaScript客户端回调更新Plotly图表时，如何添加并显示第二条轨迹？

要让你的图表成功显示两条轨迹，需要从初始图表定义和客户端回调的返回结构两方面调整，具体步骤如下：

1. 先修正初始图表的轨迹容器数量 #

你当前的初始图表仅包含一条空的Scattergl轨迹，要支持两条独立轨迹，需要初始化两个空的轨迹容器：

fig_rmstrace = go.Figure(data=[
    go.Scattergl(y=[], x=[], name='RMS轨迹1'),
    go.Scattergl(y=[], x=[], name='RMS轨迹2')
])

这样图表加载时就有两个独立的数据轨迹槽，后续可以分别向它们追加数据。

2. 修改客户端回调的return语句 #

extendData的返回格式有明确要求：

• 第一个元素是数据对象的数组，每个对象对应一条轨迹的新x/y数据
• 第二个元素是轨迹索引的数组，对应要更新的轨迹位置（0对应第一条，1对应第二条）
• 第三个元素是max_points，用于控制图表保留的最大数据点数

修改你的JavaScript函数return部分：

return [
    // 依次传入两条轨迹的新数据
    [{y: [data.rms], x: [data.t]}, {y: [data_rms.rms], x: [data_rms.t]}],
    // 指定更新索引0和1的两条轨迹
    [0, 1],
    data.max_points
];

为什么之前的代码无法显示两条轨迹？ #

你之前的写法只返回了单个数据对象，并且仅指定更新索引0的轨迹——即使取消注释第二条数据的代码，也会把两条数据都追加到同一条轨迹上，导致数据重叠而非显示两条独立轨迹。现在通过指定[0,1]的索引数组，就能将两组数据分别对应到两个轨迹容器中。

额外注意事项 #

确保你的data和data_rms对象都包含完整的rms和t字段，同时max_points是有效的数值（比如你希望图表保留的历史数据点上限）。

内容的提问来源于stack exchange，提问作者HCKRMVT