如何在本地安装和使用Chart.js包?

huangapple go评论74阅读模式
英文:

How to install and use the Chart.js package locally?

问题

这似乎应该很简单,但我似乎遇到了问题。我尝试在我的树莓派上使用npm安装chart.js,因为在我的项目中我不能使用在线版本。

基本上,我导航到了我的项目文件夹(cd my_project),然后使用了npm init -ynpm 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:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Test&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;canvas id=&quot;myChart&quot;&gt;&lt;/canvas&gt;
  &lt;script src=&quot;/node_modules/chart.js/dist/chart.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
    const ctx = document.getElementById(&#39;myChart&#39;).getContext(&#39;2d&#39;);
    const myChart = new Chart(ctx, {
      type: &#39;bar&#39;,
      data: {
        labels: [&#39;A&#39;, &#39;B&#39;, &#39;C&#39;],
        datasets: [{
          label: &#39;Test Dataset&#39;,
          data: [10, 20, 15],
          backgroundColor: [&#39;red&#39;, &#39;green&#39;, &#39;blue&#39;],
        }]
      },
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

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.jsimport '@kurkle/color';,依赖于Node.js风格的模块解析)。

chart.js 旨在与打包工具结合使用,例如 parcelvite,或 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 &lt;script&gt; with type=&quot;module&quot; (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 has import &#39;@kurkle/color&#39;; 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 &lt;script&gt;)


Note that the Chart.js documentation tells you to use the umd version if you aren't using a bundler.

huangapple
  • 本文由 发表于 2023年7月24日 18:10:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76753442.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定