NodeJS上的ChartJS：错误图表未定义
Posted
技术标签:
【中文标题】NodeJS上的ChartJS：错误图表未定义【英文标题】：ChartJS on NodeJS: error Chart is not defined 【发布时间】：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" ></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小提琴链接吗？ 我在小提琴中看到了一些例子，一切正常。在我的系统上没有... 【参考方案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? 提供的出色回答
【讨论】：
以上是关于NodeJS上的ChartJS：错误图表未定义的主要内容，如果未能解决你的问题，请参考以下文章
使用 nodejs 和 chartjs 从 mongodb 插入和获取值