Flask项目中如何通过Ajax请求刷新模板内的Plotly图表数据？

核心问题说明 #

当前代码存在两个核心问题导致图表不更新：

1. 后端路由对POST请求返回的是完整渲染的HTML页面，而非Ajax需要的纯图表JSON数据
2. 前端仅在页面首次加载时渲染一次图表，Ajax拿到新数据后没有触发图表更新逻辑

代码修改步骤 #

1. 后端Flask代码调整 #

修改index路由逻辑，区分GET和POST请求的返回值：GET请求返回完整页面，POST请求直接返回Plotly图表的JSON数据

from flask import render_template, Blueprint, request, jsonify
from App.functions.reddit_streamer import AWS_RDB
import json
import plotly
import plotly.express as px

core = Blueprint('core', __name__)

@core.route('/', methods = ['GET', 'POST'])
def index():
    db = AWS_RDB()
    df = db.query_half_hour()
    fig = px.line(df.loc[1:,:], x = 'date' , y = '# of comments')
    graphJSON = json.dumps(fig, cls = plotly.utils.PlotlyJSONEncoder)
    
    # 新增判断：POST请求返回JSON，GET请求返回页面
    if request.method == 'POST':
        return jsonify(json.loads(graphJSON))
    return render_template('index.html', graphJSON = graphJSON)

2. 前端jQuery代码调整 #

修改Ajax请求的成功回调逻辑，拿到新数据后调用Plotly的更新方法刷新图表，同时移除会阻塞页面的同步请求配置：

<script> 
    $(document).ready(function(){
        // 首次加载渲染图表
        var graphs = {{graphJSON | safe}};
        Plotly.plot('load',graphs,{});

        function ajaxCall(){
            $.ajax({
                // 移除async: false配置，同步请求会阻塞页面交互
                type: 'POST',
                url: '/',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (newGraphData) {
                    // 用新数据更新图表，Plotly.react会复用现有画布，性能更好
                    Plotly.react('load', newGraphData, {});
                }
            });
        }
        // 定时拉取新数据
        setInterval(ajaxCall, 2000);
    });
</script>

逻辑说明 #

• 页面首次打开时走GET请求，后端返回完整页面，注入初始图表数据完成第一次渲染
• 之后每2秒触发一次Ajax POST请求，后端直接返回最新的图表JSON数据
• 前端拿到新数据后调用Plotly.react方法直接更新现有图表，无需重新加载页面

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