Chart.js在Google Chrome浏览器中无法加载问题求助

我一眼就看出问题所在了——你用的是Chart.js 1.0.2这个超级老旧的版本，但你的代码是Chart.js 2.x及以上版本的语法规范，两者的API结构差异极大，旧版本根本无法识别你写的配置，所以才会出现图表不加载、控制台也没报错的情况（因为没有语法错误，只是API不匹配，旧版本默默忽略了无效配置）。

快速修复方案 #

直接把你的CDN链接替换成cdnjs提供的最新稳定版Chart.js即可，同时注意3.x及以上版本的Chart.js推荐使用chart.umd.js适配浏览器环境：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js"></script>
</head>
<body>
  <div>
    <canvas id="myChart2" width="400" height="400"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("myChart2").getContext("2d");
    var myChart2 = 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: {
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        }
      }
    });
  </script>
</body>

补充说明 #

如果你非要坚持使用Chart.js 1.x版本，那你得完全改用对应版本的语法（比如初始化方式是new Chart(ctx).Bar(data, options)，配置结构也完全不同），但非常不推荐这么做——1.x版本早已停止维护，没有任何安全更新和功能支持，建议直接升级到最新版。

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