Flask中如何通过单个函数同时更新表格与Plotly图表？

核心思路 #

不用render_template，直接在/api/data接口返回包含表格数据和图表JSON的复合响应，前端分别处理这两部分数据即可。

后端实现（Flask） #

修改/api/data接口，把表格数据和生成的graphJSON打包成一个字典返回：

from flask import Flask, jsonify
import plotly
import plotly.graph_objects as go
import json

app = Flask(__name__)

@app.route('/api/data')
def get_data():
    # 1. 获取/生成表格数据（沿用你原有逻辑）
    table_data = [
        {"id": 1, "name": "A", "value": 10},
        {"id": 2, "name": "B", "value": 20},
        {"id": 3, "name": "C", "value": 15}
    ]
    
    # 2. 生成Plotly柱状图并转为JSON格式
    fig = go.Figure(data=[go.Bar(x=[item['name'] for item in table_data], y=[item['value'] for item in table_data])])
    graph_json = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    
    # 3. 返回包含表格和图表数据的复合响应
    return jsonify({
        "table_data": table_data,
        "graph_json": graph_json
    })

if __name__ == '__main__':
    app.run(debug=True)

前端实现（JavaScript） #

前端请求接口后，分别调用表格更新和图表更新的逻辑：

// 示例：用DataTables更新表格（替换成你实际用的表格组件逻辑）
function updateTable(data) {
    $('#data-table').DataTable().clear().rows.add(data).draw();
}

// 更新Plotly图表
function updateGraph(graphJson) {
    // 解析后端返回的JSON字符串为对象
    const fig = JSON.parse(graphJson);
    // 渲染到页面指定容器（确保页面有id为plotly-container的元素）
    Plotly.newPlot('plotly-container', fig.data, fig.layout);
}

// 发起请求并处理响应
fetch('/api/data')
    .then(res => res.json())
    .then(response => {
        updateTable(response.table_data);
        updateGraph(response.graph_json);
    })
    .catch(err => console.error('数据请求失败:', err));

常见问题排查 #

• 确认前端正确解析graph_json：后端返回的是JSON字符串，必须用JSON.parse()转成对象后再传给Plotly
• 检查图表容器的存在性：页面中要确保有对应id的DOM元素
• 查看浏览器控制台：排查是否有JSON解析错误、Plotly未加载等报错

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