Есть ли еще лучший способ построения Flask графиков на Html интерфейсе

Question

У меня есть шаблон flask, который я использую для отображения графиков во внешнем интерфейсе приложения. Однако этот код класса HTML div вызывает ошибку. Что конкретно я здесь упускаю

HTML КОД:

                    <div class="layer w-100 pX-20 pT-20">
                      <h6 class="lh-1">Monthly Stats</h6>
                      <div class="chart" id="bargraph">
                        <script>
                          var graphs = {{plot | safe}};
                          Plotly.plot('bargraph',graphs,{});
                        </script>
                      </div>
                    </div>

Я получаю следующие ошибки: 1. Строка идентификатора, литерал или цифра c ожидается 2. ожидается оператор 3 Ненужная точка с запятой 4. Неопределенный оператор 5. var используется вместо let или const 6. Неразрешенная переменная 'plot' 7. Выражение не является присваиванием или вызовом 8. Неразрешенная переменная 'safe'

Вот как мой индексный код выглядит как

from flask import Flask, render_template,request
import plotly
import plotly.graph_objs as go
import pathlib
import pandas as pd
import numpy as np
import json

app = Flask(__name__)

#create path
PATH = pathlib.Path(__file__).parent
DATA_PATH = PATH.joinpath("data").resolve()

#Data function
def data_used():
    # Import data
    df = pd.read_csv(DATA_PATH.joinpath("fulldata.csv"), low_memory=False)
    return df

#####################################################################################
def create_df():
    # get counts per NAR type
    df_nar = pd.DataFrame(data_used().groupby('Hosp_id')['Document Source'].value_counts())
    df_nar = df_nar.rename({'Document Source': 'Doc count'}, axis='columns')
    df_nar = df_nar.reset_index()

    return df_nar



def create_plot(df_nar):
    # set up plotly figure
    fig = go.Figure()
    # Manage NAR types (who knows, there may be more types with time?)
    nars = df_nar['Document Source'].unique()
    nars = nars.tolist()
    nars.sort(reverse=False)
    # add one trace per NAR type and show counts per hospital
    data = []
    for nar in nars:
        # subset dataframe by NAR type
        df_ply = df_nar[df_nar['Document Source'] == nar]

        # add trace
        fig.add_trace(go.Bar(x=df_ply['Hospital_id'], y=df_ply['Doc count'], name='Document Type=' + str(nar)))

    # make the figure a bit more presentable
    fig.update_layout(title='Document Use per hospital',
                yaxis=dict(title='<i>count of Docuement types</i>'),
                xaxis=dict(title='<i>Hospital</i>'))


    graphJSON = json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON

@app.route('/')
def index():

    bar = create_plot(create_df())
    return render_template('index.html', plot=bar)





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

Его Javascript Я использую для отображения графика на этом классе Div. бэкэнд хорошо закодирован, я получаю эту ошибку только из этого раздела класса div. Кто-нибудь испытал это, чтобы помочь

Answer 1

Начните с var graphs = "{{plot | safe }}";