JavaScript Plotly调用Plotly.react更新时仅2/5个图表生效问题

你已经验证过BLE数据解析、缓冲区更新逻辑正确，问题100%出在Plotly调用逻辑上，按以下顺序排查即可：

• 检查trace与图表的对应匹配关系
  如果你把5条曲线放在同一个图表容器里，打印Plotly.react调用时传入的完整data数组，确认每个索引位对应的x、y数据都是最新值，排除索引错位问题——比如把第2条曲线的数组错传给第3条，就会导致对应曲线不更新。
  如果你是5个独立图表（对应5个不同的div容器），禁止给所有图表共用同一个layout对象，必须给每个图表维护独立的layout实例，每个图表更新时单独递增自己layout里的datarevision值。共用layout对象时，JS对象引用的特性会导致部分图表拿不到revision变更通知，就会出现随机部分图表不刷新的情况，和你遇到的1、3正常其他不刷新的表现完全吻合。
• 检查数据数组的引用更新
  不要直接把push操作后的原数组传给Plotly，Plotly的diff检测对数组原地修改的识别不稳定，如果你给1、3的数组做了浅拷贝、其他数组没做，就会出现部分刷新的情况。传参时给每个数据数组做一层浅拷贝即可，比如写y: Array.from(sensor2Data)或者y: [...sensor2Data]，不要直接传原数组引用。
  不要直接修改已经传给Plotly的trace对象属性，这种原地修改的操作大概率会被Plotly的变更检测跳过。
• 检查Plotly.react的调用参数
  如果是5个独立图表，确认每次调用Plotly.react的第一个参数（DOM容器）对应正确，不要出现第2个图表的更新调用错绑到第1个容器上的低级错误。每次调用必须完整传入对应图表更新了datarevision的layout对象，不要省略参数依赖Plotly内部缓存的配置。
• 排除file://协议的干扰
  Chrome对file://路径下的页面有额外安全限制，可能静默拦截部分脚本执行逻辑，可以在代码文件夹下启动简易本地静态服务验证：在文件夹终端执行python -m http.server，之后通过http://localhost:8000访问页面，排除协议导致的脚本异常。

快速定位技巧：写一个1秒触发一次的测试定时器，给5个数据数组分别塞固定递增值（比如第1个数组每次加1，第2个每次加2，以此类推），完全断开BLE逻辑，如果此时还是只有1、3刷新，就可以100%确定是Plotly传参/对象引用的问题，和数据解析、BLE逻辑无关。

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