无需npm、bower或CDN，如何在项目中使用Chart.js？

嘿，我来帮你搞定这个问题！你之前尝试用require的方式其实走不通——因为浏览器原生并不支持CommonJS的require语法，除非额外引入模块加载器，但你又不能用npm这类工具，所以直接用原生<script>标签才是最靠谱的方案。下面是具体步骤：

步骤1：获取Chart.js的独立文件 #

先去Chart.js的官方网站下载它的独立JavaScript文件（选压缩版Chart.min.js或者未压缩版Chart.js都行），然后把这个文件放到你项目里的指定目录，比如你例子里的../chartjs/文件夹，务必确保文件路径准确。

步骤2：用<script>标签直接引入 #

在你的HTML页面中，先引入Chart.js文件，再编写自己的图表代码。顺序很重要，不然浏览器会找不到Chart构造函数。示例代码如下：

<!-- 先加载Chart.js -->
<script src="../chartjs/Chart.min.js"></script>

<!-- 接着写图表逻辑 -->
<script>
  var ctx = document.getElementById("bar-chart");
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

关键提醒 #

• 路径别写错：如果你的HTML文件在/pages/chart.html，Chart.js在/chartjs/Chart.min.js，那么引入路径就是../chartjs/Chart.min.js；如果两者在同一目录，路径就是./Chart.min.js。
• 加载顺序不能乱：必须先让浏览器加载完Chart.js，再执行你的图表代码，不然会抛出Chart is not defined的错误。

这样就能完全脱离npm、bower和CDN，顺利在项目里用Chart.js啦！

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