这应该很简单，但我好像很纠结。我试着在我的树莓派上使用npm安装chart.js，因为我的项目不能使用在线版本。
基本上，我导航到我的项目文件夹（cd my_project），然后使用npm init -y和npm install chart.js。从我所看到的来看，安装是成功的。
之后，我简单地创建了一个html文件来测试它：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="/node_modules/chart.js/dist/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['A', 'B', 'C'],
datasets: [{
label: 'Test Dataset',
data: [10, 20, 15],
backgroundColor: ['red', 'green', 'blue'],
}]
},
});
</script>
</body>
</html>字符串
但是，结果却是一页黑页。哪里出了问题？
1条答案
按热度按时间k3fezbri1#
打开浏览器的开发者工具。看看控制台。阅读错误消息。
未捕获的语法错误：导入声明只能出现在模块的顶层
浏览器在以下几种情况下支持这些功能：
type="module"加载<script>（你没有，但这很容易修复）import语句使用URL（这里是症结所在，chart.js 有import '@kurkle/color';，这取决于Node.js风格的模块解析）。这种格式做了大量的内联和重写，所以它在更多的地方“只是工作”（包括在使用常规
<script>的浏览器中加载时）。请注意，the Chart.js documentation告诉您，如果您没有使用捆绑包，请使用umd版本。