是否有另一种更好的方法在 Html 前端绘制 Flask 图

Question

我有一个烧瓶样板，用于在应用程序的前端显示图形。 但是，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. 预期的标识符字符串、文字或数字 2. 预期的语句 3. 不必要的分号 4. 未终止的语句 5. 使用 var 代替 let 或 const 6. 未解析的变量 'plot' 7. 表达式不是赋值或调用 8. 未解析的变量“安全”

这是我的索引代码的样子

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 }}";