Question

我正在与一个团队合作开发一个软件项目，我想添加一个使用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"> 
      <!-- 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库，我怎么能要求＆＃39; Chart.js库？

Answer 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">

在Node.js

1 个答案: