Я работаю над веб-приложением Flask, в котором я пытаюсь включить график разброса Plotly как часть двух очень похожих веб-страниц.
- Первая страница соответствует текущему эксперименту, в котором вводимое время редактируется, а график показывает доступные результаты с начала эксперимента и до текущего времени.
- Вторая страница соответствуетдля завершенного эксперимента, где показаны те же поля ввода, теперь только для чтения, и тот же график сделан для всего набора данных для этого эксперимента
Учитывая сходство, которое я использую - та же функциясоздать код json для графика - тот же html, чтобы определить div, на котором должен отображаться график
ФУНКЦИЯ ДЛЯ СОЗДАНИЯ Графа JSON
def CreatePlot(experiment_name):
query=Result.query.filter_by(experiment=experiment_name)
results_df=pd.read_sql_query(query.statement, query.session.bind)
ind=0
color=["#2B4141","#B80C09","#0EB1D2","#8AEA92","#91CB3E","#E3C0D3","#6B2737"]
fig = go.Figure()
buttonslist=[dict(label="All",
method="update",
args=[{"visible": [True]*len(cf.resultlabels),
}])]
for label in cf.resultlabels:
resultslabel=results_df.columns[ind+1]
fig.add_trace(go.Scatter(
x=results_df['runningtime'],
y=results_df[resultslabel],
name=label,
visible=True,
line=dict(color=color[ind])))
visible=[False]*len(cf.resultlabels)
visible[ind]=True
buttonslist.append(dict(label=label,
method="update",
args=[{"visible": visible}]))
ind=ind+1
fig.update_layout(
updatemenus=[go.layout.Updatemenu(active=0,buttons=list(buttonslist))],
xaxis=go.layout.XAxis(title=go.layout.xaxis.Title(text="Time (min)")))
graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
print(graphJSON)
return graphJSON
HTML:
Commonhtml-файл макета для обеих веб-страниц содержит ссылку на plotl-latest.min.js и d3.js
{% block head %}
{% block refresh %}{% endblock refresh %}
<script src={{ url_for('static', filename='js/plotly-latest.min.js') }}>
</script>
<script src={{ url_for('static', filename='js/d3.min.js') }}></script>
{% endblock head %}
общий код для заговора: включен как в файл Experinrun.html, так и в файлresresults.html
{% if plot!=None %}
<div class="chart" id="scatter">
<script>
var graphs = {{plot | safe}};
Plotly.plot('scatter',graphs,{});
</script>
</div>
</div>
{% endif %}
.
МАРШРУТЫ:
страница для запуска эксперимента
@app.route("/experiment/<string:experiment_name>/running",methods=['GET','POST'])
def exprun(experiment_name):
experiment=Experiment.query.filter_by(name=experiment_name).first_or_404()
...
results=Result.query.filter_by(experiment=experiment.name).all()
if results:
#Generate results plot
plot = CreatePlot(experiment.name)
else:
resultform=ResultTableForm()
plot=None
flash(resultform.errors)
flash(form.errors)
return render_template('experimentrun.html', form=form, resultform=resultform, forcesave=forcesave, runningtime=runningtime, plot=plot)
страница для завершенного эксперимента
@app.route("/experiment/<string:experiment_name>/completed",methods=['GET'])
def expresults(experiment_name):
experiment=Experiment.query.filter_by(name=experiment_name).first_or_404()
...
results=Result.query.filter_by(experiment=experiment.name).all()
if results:
#Generate results plot
plot = CreatePlot(experiment.name)
else:
plot = None
#General
flash(form.errors)
return render_template('experimentresults.html', form=form, plot=plot)
ВЫПУСК:
ВЫПОЛНЯЯ маршрутпоказывает графики по желанию
Я получаю консольную ошибку на завершенном маршруте (с использованием Chrome): Uncaught ReferenceError: Plotly не определено
Я не могу понять, почему это работает в одном случае, а не в другом.
Любая помощь будет высоко ценится