本地安装Chart.js后测试页面空白，求问题排查与解决方法

我在树莓派上通过npm本地安装Chart.js（项目无法使用在线CDN），步骤如下：

1. 进入项目目录：cd my_project
2. 初始化项目：npm init -y
3. 安装Chart.js：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>

问题排查及解决方法 #

• 脚本路径错误：开头的/node_modules/是绝对根路径，直接打开本地HTML文件时，浏览器会把它当成系统根目录，根本找不到对应文件。改成相对路径即可：./node_modules/chart.js/dist/chart.js（注意开头的.）。
• 浏览器跨域限制：直接用file://协议打开本地HTML文件，浏览器会阻止加载本地node_modules里的脚本，触发跨域错误。解决办法是启动本地服务器，比如在项目目录运行npx serve，然后通过http://localhost:3000访问页面。
• canvas未设置尺寸：默认canvas的尺寸很小，可能图表已经渲染但你看不到。给canvas加上尺寸：

  <!-- 直接设置属性 -->
  <canvas id="myChart" width="400" height="200"></canvas>
  <!-- 或者用CSS控制 -->
  <style>
    #myChart {
      width: 400px;
      height: 200px;
    }
  </style>
  

• 版本兼容问题：新版Chart.js可能有细微的API变化，虽然你的代码是基础用法，但可以试试安装稳定版：npm install chart.js@3.9.1，重新安装后再测试。

内容的提问来源于stack exchange，提问作者Zhou