Question

我正在尝试在NodeJS上使用ChartJS，但它不起作用。我安装了npm install chart.js --save并创建了最简单的测试，如下所示，但显示错误Chart is not defined。我已经尝试将文件“chart.js”复制到同一目录，我已经尝试指向node_modules/chart.js/....目录，但我无法使其工作。此外，我无法指向文件https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js，因为系统应该“独立”

<html>

<head>
    <script src="chart.js"></script>
</head>

<body>

    <canvas id="mycanvas" width="400" height="400"></canvas>

    <script>
        var chrt = document.getElementById("mycanvas").getContext("2d");
        var data = {
            labels: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul"],
            datasets: [{
                label: "My First dataset",
                fillColor: "rgba(220,220,220,0.8)",
                strokeColor: "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data: [65, 59, 80, 81, 56, 55, 40]
            }]
        };
        var myFirstChart = new Chart(chrt).Bar(data);
    </script>

</body>

</html>

有什么问题？

Answer 1

导入图表库的方式没有任何问题。它应该以这种方式工作（只要一切设置正确）：

...
<script src="chart.js"></script>
...

但是，由于您用于构建图表的语法，可能会出现实际问题。

使用 npm install chart.js --save 安装Chart.js模块时，它会安装最新版本的Chart.js （目前为2.6），但是您在创建图表时使用旧语法（适用于v1.x）。

以下是在Chart.js版本2.6中创建图表的正确语法：

...
var chrt = document.getElementById("mycanvas").getContext("2d");
var data = {
   labels: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul"],
   datasets: [{
      label: "My First dataset",
      backgroundColor: "rgba(220,220,220,0.8)",
      borderColor: "rgba(220,220,220,0.8)",
      hoverBackgroundColor: "rgba(220,220,220,0.75)",
      hoverBorderColor: "rgba(220,220,220,1)",
      data: [65, 59, 80, 81, 56, 55, 40]
   }]
};
var myFirstChart = new Chart(chrt, {
   type: 'bar',
   data: data
});
...

Answer 2

我不确定您是否使用框架，但我尝试npm install chart.js，然后在与index.html相同的级别创建node_modules。然后我像这样导入它。

<script src="./node_modules/chart.js/dist/Chart.js"></script>

工作正常，请尝试，如果不起作用，请提供更多详细信息。

Answer 3

您可能要避免在前端文件中引用模块。而是考虑为模块文件创建路由，然后在前端文件中引用该路由。

示例：

index.html

<script src="/bootstrap.min.js"></script>

app.js

app.get('/bootstrap.min.js', function(req, res) {
    res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});

有关更多详细信息，请参见@ jfriend00 How to include scripts located inside the node_modules folder?

NodeJS上的ChartJS：未定义错误图表

3 个答案: