将数据从 Python 传递到 JavaScript 以绘制 Chart.js答案

【问题标题】：Passing data from Python to JavaScript to plot Chart.js将数据从 Python 传递到 JavaScript 以绘制 Chart.js
【发布时间】：2022-01-08 23:59:03
【问题描述】：

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

我想使用Chart.js 呈现图表。数据是用 Python 生成的，我知道如何将其传递给 html：render_template("/index.html", chart_data=chart_data)。但是，在将chart_data 传递给html 之后，我不知道如何将它传递给生成图表的javascript。或者，直接从.py 传递给.js 而不绕过.html 会更好吗？如果有，有什么办法？

这是我的代码：应用程序.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()

index.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>

app.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: {}
});

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

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

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

【问题讨论】：

这能回答你的问题吗？ How could I pass data to chart.js with flask?
感谢您的指导。是的，它回答了但部分。如果我不想在.html 文件中包含我的javascript 代码，而是有一个单独的.js 文件怎么办？我将.jsfile 修改为labels: {{ chart_data['labels']| tojson }} 和data: {{ chart_data['values']| tojson }}，但似乎这种语法仅在html 文件中受支持。
这就是 API 的用途。
我不明白你的回答。你能详细说明一下吗？ @JishanShaikh
您可以使用自定义 API 直接将数据（最好是 JSON 格式）传输到 JavaScript，而不是将数据从 python 发布到 HTML。您必须编写一个 API 并托管它。

标签： javascript python html chart.js

【解决方案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'}}"/>

Link to Flask static files with url_for

【讨论】：