我正在尝试在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>
怎么了？
导入图表库的方式没有错。它应该以这种方式工作(只要所有内容都设置正确(：
...
<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
});
...
我不确定您是否正在使用框架npm install chart.js但我尝试然后在与node_modules相同的级别中创建index.html。然后我像这样导入它。
<script src="./node_modules/chart.js/dist/Chart.js"></script>
工作正常，请尝试，如果不起作用，请提供更多细节。
您可能希望避免在前端文件中引用模块。相反，请考虑为模块文件创建路由，然后在前端文件中引用该路由。
例：
索引.html
<script src="/bootstrap.min.js"></script>
应用.js
app.get('/bootstrap.min.js', function(req, res) {
res.sendFile(__dirname + '/node_modules/bootstrap/dist/bootstrap.min.js');
});
有关更多详细信息，请参阅这个很棒的答案，由@jfriend00提供 如何包含位于node_modules文件夹中的脚本？