绘制多个散点图 - 渲染问题

Posted 2023-02-18

【中文标题】绘制多个散点图 - 渲染问题

【英文标题】：Plotly Multiple Scatter Plots - Rendering Problem

【发布时间】：2022-01-12 15:54:32

【问题描述】：

我正在尝试使用 Plotly 在一页上绘制 10 多个散点图。但是，我注意到，如果创建了 8 个以上的地块，一些地块会显示一个带有皱眉脸的正方形。我读到这意味着 Chrome 无法呈现图表。

图表有多复杂并不重要。即使是 9 个基本图表也会导致一个无法呈现。请参阅下面的示例代码来复制问题：

https://codepen.io/ceds/pen/wvrGoLa

HTML

<div id="graphDiv1"></div>
<div id="graphDiv2"></div>
<div id="graphDiv3"></div>
<div id="graphDiv4"></div>
<div id="graphDiv5"></div>
<div id="graphDiv6"></div>
<div id="graphDiv7"></div>
<div id="graphDiv8"></div>
<div id="graphDiv9"></div>
<div id="graphDiv10"></div>
<div id="graphDiv11"></div>
<div id="graphDiv12"></div>
<div id="graphDiv13"></div>
    

JS

for (let i = 1;i < 13;i++) 
    
    var trace1 = 
        x: [1, 2, 3, 4],
        y: [4, 1, 5, 3],
        mode: 'markers',
        type: 'scattergl',
        marker:
            size: [30, 80, 50, 80],
            color: 'blue'
        ,
        name: 'Third Trace'
    ;

    var data = [trace1];

    var layout = 
        title: `Chart $i`
    ;

    var graphDiv = document.getElementById('graphDiv' + i.toString());

    Plotly.newPlot(graphDiv, data, layout);

知道如何克服这个问题吗？

【问题讨论】：

在控制台中，当页面上有 10 多个绘图时，会出现一个警告，解释行为 WARNING: Too many active WebGL contexts. Oldest context will be lost。我用谷歌搜索了一下，似乎这是一个严格的限制。这个问题超出了我的知识范围，但这里有一个 relevant plotly forum thread 可能会有所帮助。

@BasvanderLinden 对此表示感谢。所以基本上如果我不使用 GL 图那么应该没问题吗？看起来没有 gl 的例子渲染得很好

【参考方案1】：

似乎有一个关于此的 Github 问题。该问题未解决，因为它是 Chrome 的限制：

https://github.com/plotly/plotly.js/issues/2333