Plotly多散点图渲染问题：单页超8张时Chrome出现加载失败异常

问题根因 #

该渲染异常是Chrome浏览器单页面活跃WebGL上下文数量限制导致的，默认上限通常为8个。你代码中使用的scattergl是Plotly的WebGL高性能渲染模式，每生成1张scattergl图表就会创建1个独立的WebGL上下文，数量超过8个后浏览器会自动销毁最早创建的上下文，就会出现带哭脸的渲染失败标识，和图表本身的复杂度无关。

解决方案 #

• 方案1：替换为普通散点图
  如果你的单张图表数据量不大（少于1万个数据点），直接把trace配置里的type: 'scattergl'修改为type: 'scatter'即可。普通散点图走SVG渲染，不存在WebGL上下文数量限制，改动成本最低。
• 方案2：配置共享WebGL上下文
  需要保留WebGL高性能渲染能力的场景，可以在初始化所有图表前添加全局配置，让所有GL图表共用同一个WebGL上下文，示例代码如下：

// 初始化图表前加这段配置即可
Plotly.setPlotConfig({
  glCanvasId: 'shared-plotly-gl-canvas'
})

配置后不会触发上下文数量上限，同时保留WebGL的渲染性能，适合单图表数据量较大的场景。

• 方案3：懒加载+主动释放上下文
  如果页面需要展示几十张甚至更多大数据量散点图，可以结合滚动监听做懒加载：仅渲染当前视口内的图表，当图表滚动出可视区域时，调用Plotly.purge(图表DOM节点)方法主动销毁图表释放WebGL上下文，保证同时活跃的上下文数量始终低于浏览器限制。
• 方案4：修改浏览器启动参数（仅适合本地调试，不推荐生产使用）
  本地调试时可以给Chrome添加启动参数--max-active-webgl-contexts=自定义数量来提高上下文上限，但该操作需要用户侧修改浏览器配置，无法面向普通访客使用。

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