javascript - 我使用 Python Flask 和 javascript 构建折线图，但它不起作用，尽管我可以看到值存在于 chrome 检查元素中

问题描述

我正在尝试使用 python Flask 和 HTML 构建折线图。这是我的 HTML 脚本

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
</head>

<body>

    
    <canvas id="lineChart" width="900" height="400"></canvas>
    <script>
        var ctx = document.getElementById("lineChart").getContext("2d");
        var lineChart = new Chart (ctx, {
            type: "line",
            data: {
                labels: {{ labels | safe }}
                datasets: [
                    {
                        label: "Room 1 Temperature",
                        data: {{ values | safe }},
                        fill: false,
                        borderColor: "rgb(75, 192, 192)",
                        lineTension: 0.1
                    }
                ]
            },
            options: {
                responsive: false
            }
        });
    </script>
    
</body>

</html>

这是python脚本：

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/test')
def test():
  data = [
    ("a", 70),
    ("b", 50),
    ("c", 10),
    ("d", 60),
    ("e", 50),
    ("a", 90),
  ]

labels = [row[0] for row in data]
values = [row[1] for row in data]

return render_template('test.html', labels=labels, values=values)

问题是当我运行它时它什么也不显示，但这个用例工作正常。

更让我困惑的是，当我在 chrome 中进行故障排除时，我可以看到标签和值变量已经存在于 html 中。

谁能告诉我我做错了什么？先感谢您

标签： javascriptpythonflaskjinja2linechart

javascript - 我使用 Python Flask 和 javascript 构建折线图，但它不起作用，尽管我可以看到值存在于 chrome 检查元素中

问题描述

解决方案

推荐阅读