英文:
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
import
statements 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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论