英文:
How to install and use the Chart.js package locally?
问题
这似乎应该很简单，但我似乎遇到了问题。我尝试在我的树莓派上使用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>
然而，结果是一个黑色的页面。发生了什么问题？
英文:
This should be really simple, but I seem to struggle. I tried to install chart.js using npm on my Raspberry Pi, since for my project I cannot use an online version.
Basically, I navigated to my project folder (cd my_project), and then used npm init -y and npm install chart.js. From what I can see, the installation was successful.
Afterwards, i simply created a html file to test it out:
<!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>
However, the result is a black page. What went wrong?
答案1
得分: 1
打开你的浏览器开发者工具。查看控制台。阅读错误信息。
Uncaught SyntaxError: import declarations may only appear at top level of a module
chart.js 是一个模块（具体来说是一个ECMAScript模块）。
浏览器在以下几种情况下支持它们：
- ✓ 你使用
<script>标签加载，并且设置type="module"（这是你没有做的，但很容易修复） - ✓ 你从HTTP(S)加载URL，而不是文件路径URL（这是你没有做的，但很容易修复）
- ✓ 该模块不依赖于浏览器未提供的API（Chart.js设计用于在浏览器中运行，所以这没问题）
- ⚠
import语句使用了URL（这是个关键点，chart.js有import '@kurkle/color';，依赖于Node.js风格的模块解析）。
chart.js 旨在与打包工具结合使用，例如 parcel，vite，或 webpack — 而你没有使用其中任何一个。
chart.umd.js 是相同的代码，以UMD模块的形式呈现，而不是ECMAScript模块。
这种格式进行了大量内联和重写，以便在更多地方“正常工作”（包括在普通的<script>标签中加载时）。
请注意，Chart.js文档告诉你，如果你不使用打包工具，应该使用UMD版本。
英文:
Open your browser's developer tools. Look at the console. Read the error messages.
> Uncaught SyntaxError: import declarations may only appear at top level of a module
chart.js is a module (specifically an ECMAScript module).
Browsers support these under a few conditions:
- ✓ You load the
<script>withtype="module"(which you didn't, but this is easily fixed) - ✓ You load the URL from HTTP(S) and not a file scheme URL (which you didn't, but this is easily fixed)
- ✓ The module doesn't depend on APIs not provided by browsers (Chart.js is designed to run in browsers so this is fine)
- ⚠ The
importstatements use URLs (here is the sticking point, chart.js hasimport '@kurkle/color';which depends on Node.js style module resolution).
chart.js is intended to be used in combination with a bundler such as parcel, vite, or webpack — and you aren't using one of them.
chart.umd.js is the same code presented as a UMD module instead of an ECMAScript module.
This format does a lot of inlining and rewriting so it "just works" in more places (including when loaded in a browser with a regular <script>)
Note that the Chart.js documentation tells you to use the umd version if you aren't using a bundler.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论