将数据从Flask传递到单独的Javascript文件中_Javascript_Html_Flask

将数据从Flask传递到单独的Javascript文件中

javascript html flask

将数据从Flask传递到单独的Javascript文件中,javascript,html,flask,Javascript,Html,Flask,我正在运行一个flask应用程序，从用户上传的CSV中获取信息，并尝试获取这些数据并将其传递到一个单独的javascript文件中 @app.route（“/”）是获取用户csv文件并将其发送到上载html的路由 main.py 这个javascript构建了一个sankey图，它连接到一个css来格式化它 function.js 这是当前显示main.py中形状变量的html文件 upload.html 标题形状是：{{Shape}} graph.html 烧瓶教程 Sankey图表

我正在运行一个flask应用程序，从用户上传的CSV中获取信息，并尝试获取这些数据并将其传递到一个单独的javascript文件中

@app.route（“/”）是获取用户csv文件并将其发送到上载html的路由

main.py

这个javascript构建了一个sankey图，它连接到一个css来格式化它

function.js

这是当前显示main.py中形状变量的html文件

upload.html


标题
形状是：{{Shape}}

graph.html


烧瓶教程

Sankey图表用于可视化数据流和数据量
在节点之间。较宽的线条表示体积较大。

谢谢

更新：我解决这个问题的方法是简单地将javascript嵌入html，我找不到更好的方法了。

问题是什么？

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)

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'
    }]

});

<!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>

<!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>