Flask Ajax回调无法更新Plotly图表，仅首次点击生效求助

问题描述 #

通过Ajax实现点击Plotly图表更新功能，仅首次点击有效，后续点击无法触发更新。当前已实现点击点标记为红色，后续计划拓展其他点击操作。

原因分析 #

每次调用Plotly.newPlot()重新渲染图表时，原绑定在chart元素上的plotly_click事件监听器会被清除，导致后续点击无法触发事件逻辑。

修复方案 #

前端代码修改 #

将事件绑定逻辑封装到渲染函数中，每次图表渲染完成后重新绑定点击事件；同时替换同步Ajax为异步方式，避免阻塞浏览器主线程：

<script>
function update_graph(selection) {                                                                         
  return $.ajax({                                                                                   
    url: "{{url_for('scatter')}}",                                                                      
    async: true,                                                                                      
    data: { 'data': selection }                                                                       
  });                                                                                      
}                                                                                                        
</script>                                                                                        

<!-- Line plot html-->                                                                            
<div id="chart" class="chart"></div>                                                               

<!-- Line plot -->                                                                                
<script type="text/javascript">                                                                   
    function renderChart(chartData) {
        var config = {displayModeBar: false};                                                          
        var chart = document.getElementById('chart');                                                  
        Plotly.newPlot('chart', chartData, config);
        // 渲染完成后重新绑定点击事件
        chart.on('plotly_click', function(data){                                                      
            console.log(data.points[0].x);                                                               
            update_graph(data.points[0].x)
                .done(function(response) {
                    var result = JSON.parse(response);                                     
                    console.log(result);
                    renderChart(result);
                });
        });
    }

    // 初始化渲染图表
    var initialData = {{ graphJSON | safe }};
    renderChart(initialData);
</script>

后端代码优化（可选） #

原代码中x.index(int(df))在x存在重复值时会返回错误索引，修改为遍历匹配的方式提升鲁棒性：

from flask import Flask, render_template, request
import json
import plotly
import plotly.express as px

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('data-explorer.html', graphJSON=map_filter())

@app.route('/scatter')
def scatter():
    return map_filter(request.args.get('data'))

def map_filter(df=''):
    x=[0, 1, 2, 3, 4]
    y=[0, 1, 4, 9, 16]
    if df=='':
        fig = px.scatter(y, x)
    else:
        target_x = int(df)
        cols = ['blue']*len(x)
        # 遍历匹配目标x值的索引
        for idx, val in enumerate(x):
            if val == target_x:
                cols[idx] = 'red'
                break  # 若需匹配所有重复值，可删除此break
        fig = px.scatter(y, x, color=cols)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
    return graphJSON

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

关键说明 #

• 异步Ajax请求避免阻塞浏览器，提升交互流畅度
• 封装渲染函数并在每次渲染后重新绑定事件，确保后续点击依然有效
• 后端遍历匹配索引的方式，解决了x值重复时的索引错误问题

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