我正在与一个团队一起开发一个软件项目，我想添加一个使用 Chart.js 显示条形图的页面。该项目使用 Node.js，我们使用 Express.js 在服务器上渲染视图。
问题是，当我单独显示带有条形图的页面时，它工作得很好。然而，当我尝试运行服务器（即 Node app.js）时，无论我将用于绘制图表的 JavaScript 代码放在哪里，页面都不会显示图表。
这是我的 EJS 文件和图表：
<!DOCTYPE html>
<head>
<title>Connect Concordia</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- load bootsrap css -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script type="text/javascript" src="../node_modules/chart.js/dist/Chart.js"></script>
</head>
<body>
<canvas id="myCanvas" width="400" height="400">Your browser does not support the canvas feature.</canvas>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Strongly Agree', 'Agree', 'Neither Agree nor Disagree', 'Disagree', 'Strongly Disagree'],
datasets: [{
label: 'Number of Responses',
data: [5, 10, 6, 3, 2],
backgroundColor: "rgb(100, 100, 100)"
}]
},
options: {
responsive: false,
scales: {
yAxes: [{
ticks: {
min: 0,
max: 50,
stepSize: 10
}
}]
}
}
});
</script>
</body>
</html>
这是在应用程序上渲染页面的代码，可以在名为 paths.js 的较大文件中找到：
res.render('sp-results.ejs')
注意：我自己是 Node.js 的新手，所以如果还有什么我需要知道的，请告诉我。任何有关此问题的帮助将不胜感激。
更新：
使用 Chrome 检查页面后，我发现此错误消息：无法加载资源：服务器响应状态为 404（未找到）
由此，我发现图表不显示的原因是服务器无法引用该库。由于 Chart.js 不是 Node.js 库，我如何“需要”Chart.js 库？
您可以尝试的一件事是在文档确定准备好之前不要初始化图表。您可以使用 来执行此操作window.onload。
window.onload = function() {
// put chart.js code here
}
另外，我注意到您正在尝试链接到位于您的文件夹中的 Chart.js 版本node_modules。我不太确定如何在 ejs 文件中以 Express 方式执行此操作，但请查看此已回答的问题以获取有关如何处理此问题的示例。
您始终可以使用cdnjs上托管的脚本来快速验证您的页面是否正常工作。这是一个例子。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
| 归档时间： |
|
| 查看次数： |
5662 次 |
| 最近记录： |