python - 如何在一个 Flask 路由中返回一个对象和一个 html 文件?
问题描述
我编写了一个名为“/mendonza_averages”的 Flask 路由,它查询数据库并返回字典。然后,我在 html 文件中编写了一个 D3.js 脚本,以从 Flask 路由“/mendonza_averages”返回的字典中进行可视化。
我无法在同一个 Flask 路由中返回字典和 html 文件,我正在尝试这样做,因为我希望将特定的 html 文件绑定到“/mendonza_averages”Flask 路由,而且我还需要字典在 html 文件中进行可视化。
@app.route("/mendoza_averages")
def get_data ():
records = db.session.query(batting.playerid, batting.yearid, batting.h,
batting.ab).filter(batting.yearid.between( "1974", "1982")).all()
df = pd.DataFrame(records, columns=['playerid','yearid', 'h', 'ab'])
years_1974_to_1982 = np.arange (1972, 1983)
average_by_year = []
for year in years_1974_to_1982:
x = df[df["yearid"] == str (year)]
try:
y = sum (x ["h"]) /sum ( x["ab"])
except ZeroDivisionError:
continue
average_by_year.append(y)
mario_mendoza = df [df["playerid"]=="mendoma01"]
mario_mendoza_avg = mario_mendoza["h"] / mario_mendoza["ab"]
mario_mendoza_avg = mario_mendoza_avg.values.tolist()
mendoza_avg_vs_1974_to_1982 = {"mendonza_average":mario_mendoza_avg,
"average_by_year_74_to_82":average_by_year}
return (mendoza_avg_vs_1974_to_1982)
return render_template("mendoza_averages.html")
if __name__ == "__main__":
app.run(debug=True)
html 文件中的 D3.js 脚本如下所示:
<script>
var url = "/mendoza_averages";
function buildPlot() {
d3.json(url).then(function (response) {
// console.log(response);
var array_lenght = response.length;
function range(start, end) {
var ans = [];
for (let i = start; i <= end; i++) {
ans.push(i);
}
return ans;
};
//console.log(range(0, 70));
var data_dict = d3.map(response)
console.log(Object.values(response.average_by_year_74_to_82));
console.log(Object.values(response.mendonza_average));
//console.log(Object.values(object1));
var trace1 = {
x: range(1974, 1982),
y: (Object.values(response.average_by_year_74_to_82)),
type: "scatter",
name: 'MLB Average'
};
var trace2 = {
x: range(1974, 1982),
y: (Object.values(response.mendonza_average)),
type: "scatter",
name: 'Mendoza Average'
};
var data = [trace1, trace2]
Plotly.newPlot('mendoza_avgs', data, {}, { showSendToCloud: true });
}
)
};
buildPlot()
</script>
谢谢!
解决方案
您可以像这样传递数据render_template
:
@app.route("/mendoza_averages")
def get_data ():
...
return render_template("mendoza_averages.html", response=mendoza_avg_vs_1974_to_1982)
然后在您的脚本中,不使用d3.json
调用获取它:
<script>
function buildPlot() {
const response = JSON.parse({{ response | tojson }});
const array_lenght = response.length;
...
}
</script>
推荐阅读
- networking - 模拟网络请求的工具
- python - 尽管所有图像都可以下载,但请求无法从某个站点下载任何图像?
- r - 如何在 R 的列中引用“单元格”?
- android - 如何调试仅在发布模式下崩溃的 Android 应用程序
- c# - System.Web.HttpUtility.UrlDecode 中是否存在错误?
- linux - 快速目录转换为文件
- solr - 如何在 SOLR 中对已排序的组文档进行排序?
- r - 如果值为真,则输出到特定数据帧
- node.js - nodejs如何解决将routes.js放在文件夹中引起的DRY问题
- python - Django 和 Apache:为 MQTT 客户端启动附加线程