如何将Plotly图表列表传入JavaScript实现动态绘图

• 核心错误是后端直接将Python原生列表graphs传入模板，没有做JSON序列化。Jinja2渲染Python原生对象时，输出的是Python对象的repr()字符串，不是符合JavaScript语法的数组/对象字面量，会直接导致JS解析阶段报错，后续循环渲染逻辑根本不会执行。之前硬编码单个图表能正常运行，是因为单个Plotly图表对象本身已经是序列化后的JSON结构，插入模板后是合法的JS对象。
• 前端传参方式错误：将displayModeBar配置直接挂载到graph对象的config属性上，但Plotly.plot()的接收参数顺序是(挂载节点ID, 图表数据, 布局配置, 全局配置)，不会主动读取graph对象上的config属性，配置不生效也可能导致渲染异常。
• 额外注意：需要保证页面中提前存在所有ID对应的DOM容器，否则Plotly找不到挂载节点也会渲染空白。

后端代码调整 #

所有要传给前端的Python列表/对象，都先通过json.dumps()序列化为合法JSON字符串再传入模板，代码如下：

import json

@app.route("/dashboard")
@login_required
def dashboard():
    graphs = [...] # Plotly图表列表，单个元素结构为{"data": [...], "layout": {...}}
    ids = [...] # 与图表一一对应的容器ID列表

    return render_template(
        "some_template.html",
        # 统一序列化后再传模板
        graphs_json=json.dumps(graphs),
        ids_json=json.dumps(ids)
    )

前端模板调整 #

首先要在页面中生成所有对应ID的图表容器，再修正JS中的Plotly传参逻辑，将配置作为独立参数传入：

<!-- 先渲染所有图表容器 -->
{% for plot_id in ids %}
<div id="{{ plot_id }}" style="width: 100%; height: 480px; margin-bottom: 2rem;"></div>
{% endfor %}

<script type="text/javascript">
// 读取模板注入的JSON数据，自动解析为JS对象
const graphs = {{ graphs_json | safe }};
const plotIds = {{ ids_json | safe }};

// 循环渲染所有图表
for (let i = 0; i < graphs.length; i++) {
    const currentPlot = graphs[i];
    // 按Plotly要求的参数顺序传值，config作为第四个参数单独传入
    Plotly.plot(
        plotIds[i],
        currentPlot.data,
        currentPlot.layout,
        { displayModeBar: false }
    );
}
</script>

如果调整后仍有空白，直接打开浏览器开发者工具的Console面板查看报错，未序列化导致的JS语法错误会直接在控制台抛出明确提示，按提示修正即可。

内容的提问来源于stack exchange，提问作者JA-pythonista