【发布时间】：2017-08-12 06:22:54
【问题描述】：
我正在与一个团队一起开发一个软件项目，我想添加一个使用 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>
这是在应用程序上呈现页面的代码，位于名为 routes.js 的较大文件中：
res.render('sp-results.ejs')
注意：我自己是 Node.js 的新手，所以如果还有什么我需要知道的，请告诉我。对此问题的任何帮助将不胜感激。
更新：
使用 Chrome 检查页面时，我发现此错误消息：加载资源失败：服务器响应状态为 404（未找到）
从中，我发现图表不显示的原因是因为服务器无法引用库。由于 Chart.js 不是 Node.js 库，我如何“需要”Chart.js 库？
【问题讨论】：
-
当您转到该页面时，控制台上是否显示任何错误？
-
不，它只是显示一个空白画布。 HTML 可以肯定地工作，因为我让它显示一个
标记的行作为测试。
-
您是否尝试将您的 chart.js 代码放入
window.onload以查看代码在 DOM 准备好之前运行是否存在问题？ -
刚刚尝试过，但我不确定我是否正确。是这样吗？
-
是的，没错。这是example