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

【问题标题】：ChartJS on NodeJS: error Chart is not definedNodeJS上的ChartJS：错误图表未定义
【发布时间】：2018-01-05 17:08:35
【问题描述】：

我正在尝试在 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>

怎么了？

【问题讨论】：

你能为我们创建一个js小提琴链接吗？
我在小提琴中看到了一些例子，一切正常。在我的系统上没有...

标签： node.js chart.js

【解决方案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
});
...

【讨论】：

酷！现在正在工作！！！！正如你所说的@ℊααnd，这只是语法不正确。有一件事我还没有弄清楚：为什么系统找不到文件./node_modules/chart.js/dist/Chart.js？为了使它工作，有必要将此文件复制到我的/javascripts 目录。如果有比这更好的方法，我想知道该怎么做。谢谢！
关于这个新版本的提示，在“chartjs.org”中：默认情况下图表会自动调整到窗口，所以为了防止这种情况，只需将“画布对象”放在div 标签，如下图：chartjs.org/docs/latest/general/responsive.html
试试 - ../node_modules/chart.js/dist/Chart.js
我已经尝试过使用真实路径，但没有任何效果。它工作的唯一方法是将文件复制到单独的目录。

【解决方案2】：

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

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

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

【讨论】：

我试过了，但也没有用。我已经将/dist/Chart.js 文件复制到了一个单独的目录，然后它给出了另一个错误：(intermediate value).Bar is not a function

【解决方案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? 提供的出色回答

【讨论】：