将数据从 Python 传递到 JavaScript 到 plot Z671A34F677B2295C20EFBB76

Question

我想知道我的应用程序项目的最佳实践是什么。

我想使用Chart.js渲染图表。 数据在 Python 中生成，我知道如何将其传递给 html： render_template("/index.html", chart_data=chart_data) 。 但是，将chart_data传递给html后，我不知道如何将它传递给生成图表的javascript。 或者，最好直接从.py传递给.js ，而不绕过.html ？ 如果是这样，方法是什么？

这是我的代码：app.py

import os
from flask import Flask, flash, redirect, render_template, request, session
from flask_session import Session

# Configure application
app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    chart_data = {
        "labels": ["Italy", "France", "Spain", "USA", "Argentina"],
        "values": [55, 49, 44, 24, 15]
    }
    return render_template("/index.html", chart_data=chart_data)


if __name__ == "__main__":
    app.run()

索引.html

<!DOCTYPE html>

<html lang="en">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <canvas id="myChart" style="width:100%;max-width:700px"></canvas>
        <script type="text/javascript" src="static/app.js"></script>
    </div>
</body>

</html>

应用程序.js

// For the testing purpose, I generated the same data in js. 
// But I want to fetch this from .html, or directly from .py.
var xValues = ["Italy", "France", "Spain", "USA", "Argentina"];
var yValues = [55, 49, 44, 24, 15];
var barColors = ["red", "green", "blue", "orange", "brown"];

let myChart = document.getElementById('myChart').getContext('2d');

let barChart = new Chart(myChart, {
    type: 'bar',
    data: {
        labels: xValues,
        datasets: [
            {
                label: "population",
                data: yValues
            }
        ]
    },
    options: {}
});

作为旁注，这是我整个项目中一个最小的可重现示例。 在实际项目中，我的index.html使用request.form.get()从app.py获取用户输入并动态生成chart_data 。 但我将这部分排除在问题之外，因为我能够让它发挥作用。

编辑在app.js中，我进行了如下修改，但似乎只有.html支持这种语法。 我不想将我的 js 脚本包含在 html 中，而是将其作为单独的.js文件。

data: {
        labels: {{ chart_data['labels']| tojson }},
    datasets: [
        {
            label: "population",
            data: {{ chart_data['values']| tojson }}
                }
    ]
}

Answer 1

数据应来自 HTTP 调用； 它在哪里并不重要，但它不是直接来自 HTML 或“.py 文件”。 由于您使用的是 Flask 并且数据可能是动态的，因此您将为它添加一个路由，而不是静态渲染它

# assume this is defined somewhere else, like a database 
chart_data = {
        "labels": ["Italy", "France", "Spain", "USA", "Argentina"],
        "values": [55, 49, 44, 24, 15]
    } 

@app.route("/data", methods=["GET"])
def data():
    global chart_data
    return jsonify(chart_data)

然后，需要加载一个JS文件调用fetch API来获取数据，构建图表

let myChart = document.getElementById('myChart').getContext('2d');

fetch('http://127.0.0.1/data')
  .then(response => response.json())
  .then(data => {
       console.log(data);
       let labels = data.labels; 
       let barChart = new Chart(myChart, {  
           ... 
   });

然后将 JS 文件包含在模板中

<script type="text/javascript" src="{{ url_for('static', filename='app.js'}}"/>

使用 url_for 链接到 Flask static 文件

将数据从 Python 传递到 JavaScript 到 plot Z671A34F677B2295C20EFBB76

问题描述

1 个解决方案

解决方案1
0 2022-01-08 15:51:29

将数据从 Python 传递到 JavaScript 到 plot Z671A34F677B2295C20EFBB76

问题描述

1 个解决方案

解决方案1 0 2022-01-08 15:51:29

解决方案1
0 2022-01-08 15:51:29