ReferenceError: Plotly не определен - ошибка для 1 из 2 веб-страниц, которые используют одну и ту же функцию построения графика и HTML-шаблон - PullRequest
1 голос
/ 13 октября 2019

Я работаю над веб-приложением 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 не определено

Я не могу понять, почему это работает в одном случае, а не в другом.

Любая помощь будет высоко ценится

1 Ответ

0 голосов
/ 13 октября 2019

Я снова начал шаг за шагом из html текущего маршрута (который работал) и понял, что проблема связана с блоком обновления страницы, который был у меня на текущей странице, но не на завершенной

{% block refresh %}
<meta http-equiv="refresh" content="5" >
{% endblock refresh %}

Если я уберу этот блок, график графика больше не будет отображаться. Я могу удалить термин содержимого, но не часть http-эквивалент.

{% block refresh %}
<meta http-equiv="refresh">
{% endblock refresh %}

Хотя я решил проблему, я хотел бы знать, есть ли у кого-нибудь объяснение этому.

...