Tengo una lista de gráficos plotly en python. Me gustaría pasarlos a JavaScript y trazarlos dinámicamente porque la lista siempre es dinámica basada en un archivo de Excel. Esta es la forma en que actualmente lo hago a continuación:

 @app.route("/dashboard") @login_required def dashboard(): graphs = [...] # list of plotly graphs ids = [...] # list of ids for the graphs plot1= graphs[0] plot2 = graphs[1] plot3 = graphs[2] plot4 = graphs[3] return render_template( "some_template.html", plot1 = plot1, plot2 = plot2, plot3 = plot3, )

Luego en JS hago lo siguiente:

 <script type="text/javascript"> var graph1 = {{plot1 | safe}}; Plotly.plot("plot1",graph1, {}); var graph2 = {{plot2| safe}}; Plotly.plot("plot2",graph2, {}); var graph3= {{plot3| safe}}; Plotly.plot("plot3",graph3, {}); </script>

Esto funciona bien, sin embargo, el problema es que dado que la lista siempre es dinámica, puedo tener problemas. la longitud de los identificadores es siempre la misma longitud de los gráficos y está en orden.

Esta es la forma en que traté de abordarlo:

 @app.route("/dashboard") @login_required def dashboard(): graphs = [...] # list of plotly graphs ids = [...] # list of ids for the graphs return render_template( "some_template.html", graphs=graphs, ids = json.dumps(ids) )

Luego en JS hago lo siguiente:

 var graphs = {{graphs | safe}}; var ids = {{ids | safe}}; for (var i = 0; i < graphs.length; i++){ var current_graph = graphs[i]; current_graph.config={displayModeBar: false} Plotly.plot(String(ids[i]), current_graph, {}); }

Este enfoque solo muestra gráficos vacíos. ¿Qué estoy haciendo mal? ¿por favor avise?