在Node.js中显示Chart.js图表 [英] Display Chart.js chart in Node.js
问题描述
我正在与一个团队一起进行软件项目，我想添加一个页面，该页面使用Chart.js显示条形图.该项目正在使用Node.js，而我们正在使用Express.js在我们的服务器上呈现视图.
问题是，当我单独显示带有条形图的页面时，它工作得很好.但是，当我尝试运行服务器(即节点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"><！-加载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><身体>< canvas id ="myCanvas" width ="400" height ="400">您的浏览器不支持画布功能.</canvas>< script type ="text/javascript">var canvas = document.getElementById("myCanvas");var ctx = canvas.getContext("2d");var myChart = new Chart(ctx，{类型:酒吧"，数据: {标签:['完全同意'，'同意'，'既不同意也不不同意'，'不同意'，'强烈不同意']，数据集:[{标签:回复数"，数据:[5、10、6、3、2]，backgroundColor:"rgb(100，100，100)"}]}，选项: {响应式:错误，比例尺:{y轴:[{滴答声:{最小值:0，最多:50，步长:10}}]}}});</script></body></html> 这是用于在应用程序上呈现页面的代码，位于名为routes.js的较大文件中:
res.render('sp-results.ejs') 注意:我本人是Node.js的新手，所以如果我需要了解其他信息，请通知我.在这个问题上的任何帮助将不胜感激.
更新:
在使用Chrome浏览器检查页面时，我发现以下错误消息:无法加载资源:服务器以404(未找到)状态响应
由此，我发现未显示图表的原因是服务器无法引用该库.由于Chart.js不是Node.js库，我如何才能要求" Chart.js库?
您可以尝试的一件事是在确定文档准备就绪之前不要初始化图表.您可以使用 window.onload 来做到这一点.
window.onload = function(){//将chart.js代码放在这里} 此外，我注意到您正在尝试链接到位于 node_modules 文件夹中的chart.js构建.我不确定如何在ejs文件中以快递方式执行此操作，但请查看此 cdnjs 上托管的脚本来快速验证您的页面是否正常运行.这是一个例子.
<脚本类型="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"> I am working on a software project with a team, and I would like to add a page that displays a bar chart using Chart.js. The project is using Node.js, and we are using Express.js to render the views on our server.
The issue is that when I displayed the page with the bar chart on its own, it worked just fine. When I tried to run the server (i.e. node app.js), however, the page wouldn't display the chart, no matter where I placed my JavaScript code for drawing the chart.
Here is my EJS file with the chart:
<!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>
And this is the code to render the page on the app, found in a larger file called routes.js:
res.render('sp-results.ejs')
Note: I myself am new to Node.js, so if there is anything else I need to know please inform me. Any help on this issue would be appreciated.
UPDATE:
Upon inspecting the page using Chrome, I found this error message: Failed to load resource: the server responded with a status of 404 (Not Found)
From that, I found out that the reason why the chart isn't displaying is because the server can't reference the library. Since Chart.js isn't a Node.js library, how can I 'require' the Chart.js library?
One thing you could try is not initializing your chart until the document is for sure ready. You can do this using window.onload.
window.onload = function() {
// put chart.js code here
}
Also, I notice that you are trying to link to a chart.js build located in your node_modules folder. I'm not exactly sure how to do this in express in an ejs file, but take a look at this answered question for an example on how to handle this.
You can always use the script hosted on a cdnjs to quickly validate your page is working. Here is an example.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js">
这篇关于在Node.js中显示Chart.js图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
