【发布时间】：2021-07-04 04:37:05
【问题描述】：
我最近一直在使用和学习 Flask 和 python，并希望使用一些图表来可视化一些数据。我直接按照 youtube 指南使用了几乎完全相同的代码来可视化我的数据，但它没有用。所以，我尝试使用他的确切代码，但它仍然没有呈现图表。可能是什么问题？
from flask import flask, render template
app = flask(__name__)
data = [
("01-01-2020", 1597),
("02-01-2020", 1456),
("03-01-2020", 1908),
("04-01-2020", 896),
("05-01-2020", 755),
("06-01-2020", 453),
("07-01-2020", 1100),
("08-01-2020", 1235),
("09-01-2020", 1478),
]
labels = [row[0] for row in data]
values = [row[1] for row in data]
return render_template("graph.html", labels=labels, values=values)
上面是我的python应用程序的一部分，下面是它的HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Sample chart </title>
<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: "Data points",
data: {{ values | safe }}
fill: true,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1
}
]
},
options: {
responsive: false
}
});
</script>
</body>
</html>
当我加载我的本地主机时，页面是空的。根本不值一提。如果我把它放在上面，它就可以了：
<p> {{ labels }} </p>
当我检查网页时，我可以看到所有的 html 代码，但是，当我在控制台中检查时，出现错误：
未捕获的语法错误：意外的标识符
示例：17
试着用谷歌搜索了一下，但并没有真正得到我理解使用的任何东西。那么，关于可能是什么问题的任何想法？
（另外，我会链接 youtube 视频，但我有点不确定规则，我是否可以在这里复制他的代码？）
【问题讨论】：
-
您使用的是 npm 安装的图表 js，所以可能是一些路径问题或没有使用正确的脚本，尽管您可以使用 cdn 库cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.2/chart.min.js
-
npm 安装是什么意思？我将如何使用该库，将其复制到
-
你正在使用 npm 安装图表，男孩
-
这就是它不工作的原因吗？
标签： javascript python html flask