我正在开发一个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
希望这些信息对你有帮助。