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

Question

我有一个烧瓶样板，用于在应用程序的前端显示图形。但是，HTMLdiv 类上的这段代码给了我一个错误。我在这里具体错过了什么

网页代码：

<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. 未解决的变量"情节" 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 }}";开始