我试图更新一个plotly图点击使用aplogy.我不明白为什么它只工作的第一次.这里的行动颜色点点击,以后我想执行其他动作点击.
这是应用程序:
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>
型
任何帮助将不胜感激。
1条答案
按热度按时间zfycwa2u1#
你正在plotlyJS中使用newPlot,它会覆盖你的点击事件。
用react代替。
变更:
字符串
收件人:
型
React的详细信息在这里:https://plotly.com/javascript/plotlyjs-function-reference/#plotlyreact
尽管对于您的用例来说,重新设计样式可能是一个更好的解决方案,因为它可以让您自由地更改颜色。https://plotly.com/javascript/plotlyjs-function-reference/#plotlyrestyle