Flask中如何编码DataFrame为JSON？实现Plotly图表与表格同传

核心结论 #

DataTables不需要专门的JSON编码器，直接利用Pandas内置方法就能把DataFrame转为符合DataTables要求的JSON格式，再和Plotly图表的JSON数据组合即可。

完整实现代码 #

import json
import pandas as pd
from plotly.utils import PlotlyJSONEncoder

def drawtieringchart(service='All'):
    # 生成Plotly图表并转为JSON
    fig = create_tiering_scatter(service)
    graph_json = json.dumps(fig, cls=PlotlyJSONEncoder)
    
    # 处理DataFrame，生成DataTables兼容的JSON
    df = somedata  # 替换为你的实际DataFrame数据
    # orient='records'生成[{列名1:值1, 列名2:值2}, ...]格式，完美匹配DataTables的data参数
    df_json = df.to_json(orient='records')
    
    # 组合两个数据为统一JSON对象（避免直接拼接字符串，先转Python对象再合并）
    combined_data = {
        "plotly_chart": json.loads(graph_json),
        "datatable_data": json.loads(df_json)
    }
    final_json = json.dumps(combined_data)
    
    generallogger.info(final_json)
    return final_json

额外优化（贴合DataTables标准响应） #

如果需要支持分页、统计等高级功能，可以构造DataTables官方要求的完整响应结构：

# 替换上述代码中的datatable_data部分
datatable_full_response = {
    "data": json.loads(df_json),
    "recordsTotal": len(df),  # 总记录数
    "recordsFiltered": len(df)  # 过滤后记录数（无过滤时和总记录数一致）
}
combined_data = {
    "plotly_chart": json.loads(graph_json),
    "datatable": datatable_full_response
}

前端使用示例（参考） #

// 假设后端返回的JSON已存入response变量
// 渲染Plotly图表
Plotly.newPlot('chart-container', response.plotly_chart.data, response.plotly_chart.layout);

// 初始化DataTables
$('#table-container').DataTable({
    data: response.datatable_data,
    columns: [
        { data: '列名1' },
        { data: '列名2' }
        // 对应DataFrame的列名
    ]
});

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