python Flask回调无法更新图形

7qhs6swi  于 2024-01-05  发布在  Python
关注(0)|答案(1)|浏览(177)

我试图更新一个plotly图点击使用aplogy.我不明白为什么它只工作的第一次.这里的行动颜色点点击,以后我想执行其他动作点击.
这是应用程序:

  1. from flask import Flask, config, render_template, request
  2. import numpy as np
  3. import pandas as pd
  4. import json
  5. import plotly
  6. import plotly.express as px
  7. import plotly.graph_objects as go
  8. app = Flask(__name__)
  9. @app.route('/')
  10. def index():
  11. return render_template('data-explorer.html', graphJSON=map_filter())
  12. @app.route('/scatter')
  13. def scatter():
  14. return map_filter(request.args.get('data'))
  15. def map_filter(df=''):
  16. x=[0, 1, 2, 3, 4]
  17. y=[0, 1, 4, 9, 16]
  18. if df=='':
  19. fig = px.scatter(y, x)
  20. else:
  21. idx = x.index(int(df))
  22. cols = ['blue']*len(x)
  23. cols[idx] = 'red'
  24. fig = px.scatter(y, x, color=cols)
  25. graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
  26. return graphJSON
  27. if __name__=='__main__':
  28. app.run(debug=True)

字符串
下面是模板data-explorer.html

  1. <script>
  2. function update_graph(selection){
  3. var value= $.ajax({
  4. url: "{{url_for('scatter')}}",
  5. async: false,
  6. data: { 'data': selection },
  7. }).responseText;
  8. return value;
  9. }
  10. </script>
  11. <!-- Line plot html-->
  12. <div id="chart" class="chart"></div>
  13. <!-- Line plot -->
  14. <script type="text/javascript">
  15. d = {{ graphJSON | safe }};
  16. var config = {displayModeBar: false};
  17. var chart = document.getElementById('chart');
  18. //Plotly.setPlotConfig(config);
  19. console.log(d);
  20. Plotly.newPlot('chart', d, {});
  21. chart.on('plotly_click', function(data){
  22. console.log(data.points[0].x);
  23. //var figure = JSON.parse(myJson);
  24. var result = JSON.parse(update_graph(data.points[0].x));
  25. console.log(result);
  26. Plotly.newPlot('chart', result, {});
  27. });
  28. </script>


任何帮助将不胜感激。

zfycwa2u

zfycwa2u1#

你正在plotlyJS中使用newPlot,它会覆盖你的点击事件。
用react代替。
变更:

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

字符串
收件人:

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


React的详细信息在这里:https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
尽管对于您的用例来说,重新设计样式可能是一个更好的解决方案,因为它可以让您自由地更改颜色。https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle

展开查看全部

相关问题