在 Node.js 中显示 Chart.js 图表
Posted
技术标签:
【中文标题】在 Node.js 中显示 Chart.js 图表【英文标题】：Display Chart.js chart in Node.js 【发布时间】：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" >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
【参考方案1】：
您可以尝试的一件事是在文档确定准备好之前不要初始化图表。您可以使用window.onload 执行此操作。
window.onload = function()
// put chart.js code here
另外，我注意到您正在尝试链接到位于您的 node_modules 文件夹中的 chart.js 构建。我不确定如何在 ejs 文件中以 express 方式执行此操作，但请查看 answered question 以获取有关如何处理此问题的示例。
您始终可以使用托管在cdnjs 上的脚本来快速验证您的页面是否正常工作。这是一个例子。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
【讨论】：
老兄，你实际上是一个救生员！太感谢了！ :) 现在我可以开始开始处理我的实际代码 XD。这就是程序员的生活：P 没问题！我知道它是怎么回事;)以上是关于在 Node.js 中显示 Chart.js 图表的主要内容，如果未能解决你的问题，请参考以下文章
在 Django 模板中使用 for 循环显示多个 chart.js 图表
在Django模板中使用for循环显示多个chart.js图表