我正在开发一个Flask应用程序，我试图在一个JavaScript文件中使用Chart.js。
下面是我的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"></script>
</head>
<body>
<canvas id="lineChart" width="900" height="400"></canvas>
<script type="module" src="{{ url_for('static', filename='js/graph.js') }}"></script>
<!--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: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1
}
]
},
options: {
responsive: false
}
});
</script-->
</body>
</html>折线图正确显示，并注解掉部分（并且注解掉导入graph.js的行）
然而，当我尝试在graph.js文件中创建图表时，图表根本不显示。我的JS代码如下：
import "https://cdn.jsdelivr.net/npm/chart.js";
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: false,
borderColor: "rgb(75, 192, 192)",
lineTension: 0.1
}
]
},
options: {
responsive: false
}
});
}graph.js加载正常。我认为问题在于将Chart.js导入JavaScript文件。
任何帮助将不胜感激。
**注意：这段代码来自我构建的一个简单的应用程序，用于测试我将在真实的应用程序中实现的方法。代码取自YouTube上的teclado，并稍作修改以反映真实的应用程序
1条答案
按热度按时间lnlaulya1#
我试过你的代码，我从我的浏览器中获得CORS策略阻止JS模块。这可能是当你试图将Chart.js导入JavaScript文件时的原因。
如果您也有这样的问题，则此解决方案建议使用web服务器javascript modules and CORS
我也试图找到Flask和Chart.js的例子，JavaScript代码总是位于.html文件中的
<script>标签中。以下是一些示例：https://medium.com/analytics-vidhya/build-a-flask-web-app-by-scraping-a-website-display-the-data-using-chart-js-bd0c97397967https://www.codementor.io/@chirilovadrian360/flask-charts-js-via-flask-restx-with-sample-1so96nk2dt
希望这些信息对你有帮助。