Estoy tratando de trazar más de 10 diagramas de dispersión en una página usando Plotly. Sin embargo, he notado que si se crean más de 8 parcelas, algunas de las parcelas muestran un cuadrado con el ceño fruncido. He leído que esto significa que Chrome no pudo mostrar el gráfico.

No importa cuán complejo sea el gráfico. Incluso 9 gráficos básicos harán que uno no se renderice. Vea a continuación, por ejemplo, con código para replicar el problema:

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); }

¿Alguna idea de cómo superar esto?