Flask ajax回调无法更新图表

Question

我正在尝试使用 ajax 更新点击时的绘图。我不明白为什么它只在第一次起作用。这里的操作为点击的点着色，稍后我想在点击时执行其他操作。

这是应用程序：

from flask import Flask, config, render_template, request
import numpy as np
import pandas as pd
import json
import plotly
import plotly.express as px
import plotly.graph_objects as go

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:
        idx = x.index(int(df))
        cols = ['blue']*len(x)
        cols[idx] = 'red'
        fig = px.scatter(y, x, color=cols)
    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

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

这是模板

data-explorer.html

。

        <script>
        function update_graph(selection){                                                                        
          var value= $.ajax({                                                                                   
            url: "{{url_for('scatter')}}",                                                                     
            async: false,                                                                                      
            data: { 'data': selection },                                                                       
            }).responseText;                                                                                      
        return value;                                                                                         
        }                                                                                                        
        </script>                                                                                        
                                                                                                         
        <!-- Line plot html-->                                                                           
        <div id="chart" class="chart"></div>                                                             
                                                                                                         
        <!-- Line plot -->                                                                               
        <script type="text/javascript">                                                                  
            d = {{ graphJSON | safe }};                                                                  
            var config = {displayModeBar: false};                                                        
            var chart = document.getElementById('chart');                                                
            //Plotly.setPlotConfig(config);                                                              
            console.log(d);                                                                              
            Plotly.newPlot('chart', d, {});                                                              
           chart.on('plotly_click', function(data){                                                      
            console.log(data.points[0].x);                                                               
            //var figure = JSON.parse(myJson);                                                           
            var result = JSON.parse(update_graph(data.points[0].x));                                     
            console.log(result);
            Plotly.newPlot('chart', result, {});
        });

        </script>

如有任何帮助，我们将不胜感激。

Answer 1

您在plotlyJS中使用newPlot，它会覆盖您的点击事件。

使用react代替。

改变：

            Plotly.newPlot('chart', d, {});                                                              
           chart.on('plotly_click', function(data)

致：

            Plotly.react('chart', d, {});                                                              
           chart.on('plotly_click', function(data)

React 详细信息如下：https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact

尽管对于您的用例来说，更好的解决方案可能是重新设计样式，因为它可以让您自由更改颜色。 https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle