将数据从烧瓶传递到单独的Javascript文件中
提问于 2020-01-25 12:10:00
我正在运行一个烧瓶应用程序，从用户上传的CSV中获取信息，并尝试将这些数据传递到我拥有的一个单独的javascript文件中。
@app.route('/')是获取用户csv文件并将其发送到上传html的路由。
main.py
from flask import Flask, render_template, request, url_for, redirect
import pandas as pd
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def upload():
if request.method == 'POST':
df = pd.read_csv(request.files.get('file'))
return render_template('upload.html', shape=df.shape)
return render_template('upload.html')
@app.route("/graph")
def graph():
return render_template("graph.html")
if __name__ == "__main__":
app.run(debug=True)这个javascript构建了一个sankey图，它与格式化它的css连接。
function.js
Highcharts.chart('container', {
title: {
text: 'Highcharts Sankey Diagram'
},
accessibility: {
point: {
descriptionFormatter: function (point) {
var index = point.index + 1,
from = point.from,
to = point.to,
weight = point.weight;
return index + '. ' + from + ' to ' + to + ', ' + weight + '.';
}
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
['Brazil', 'Portugal', 5],
['Brazil', 'France', 1],
['Brazil', 'Spain', 1],
['Brazil', 'England', 1],
['Canada', 'Portugal', 1],
['Canada', 'France', 5],
['Canada', 'England', 1],
['Mexico', 'Portugal', 1],
['Mexico', 'France', 1],
['Mexico', 'Spain', 5],
['Mexico', 'England', 1],
['USA', 'Portugal', 1],
['USA', 'France', 1],
['USA', 'Spain', 1],
['USA', 'England', 5],
['Portugal', 'Angola', 2],
['Portugal', 'Senegal', 1],
['Portugal', 'Morocco', 1],
['Portugal', 'South Africa', 3],
['France', 'Angola', 1],
['France', 'Senegal', 3],
['France', 'Mali', 3],
['France', 'Morocco', 3],
['France', 'South Africa', 1],
['Spain', 'Senegal', 1],
['Spain', 'Morocco', 3],
['Spain', 'South Africa', 1],
['England', 'Angola', 1],
['England', 'Senegal', 1],
['England', 'Morocco', 2],
['England', 'South Africa', 7],
['South Africa', 'China', 5],
['South Africa', 'India', 1],
['South Africa', 'Japan', 3],
['Angola', 'China', 5],
['Angola', 'India', 1],
['Angola', 'Japan', 3],
['Senegal', 'China', 5],
['Senegal', 'India', 1],
['Senegal', 'Japan', 3],
['Mali', 'China', 5],
['Mali', 'India', 1],
['Mali', 'Japan', 3],
['Morocco', 'China', 5],
['Morocco', 'India', 1],
['Morocco', 'Japan', 3]
],
type: 'sankey',
name: 'Sankey demo series'
}]
});这是当前显示来自main.py的形状变量的html文件。
upload.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method=post enctype=multipart/form-data>
<input type=file name=file>
<input type=submit value=Upload>
</form>
Shape is: {{ shape }}
</body>
</html>graph.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
<figure class="highcharts-figure">
<div id="container"></div>
<p class="highcharts-description">
Sankey charts are used to visualize data flow and volume
between nodes. The wider lines indicate larger volumes.
</p>
</figure>
</body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/template.css') }}">
<script src="{{ url_for('static', filename='function.js') }}"></script>
</html>谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-02-25 08:08:24
更新:我解决这个问题的方法是简单地将javascript嵌入到html中，我找不到更好的方法来做到这一点。
Stack Overflow用户
发布于 2021-07-18 08:47:24
我有同样的问题并来到这里，现在我找到的答案是将csv文件转换为json (json.dump)，并将其发送到静态文件夹中的独立JS文件。本文给出了完整的解释：https://towardsdatascience.com/combining-python-and-d3-js-to-create-dynamic-visualization-applications-73c87a494396
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59912999
复制相关文章
腾讯云开发者
