JavaScript条形图在index.html页面无法显示问题求助

问题根源 #

1. Chart.js版本不兼容
   你当前引入的是Chart.js 1.0.2这个老旧版本，饼图用的是该版本支持的new Chart(ctx).PolarArea()语法，所以能正常显示；但条形图用的是v2及以上版本才支持的new Chart(ctx, {type: 'bar'})语法，旧版本根本识别不了，自然加载失败。

2. ID重复冲突
   承载条形图的div容器和内部canvas的ID都是barChart，调用document.getElementById("barChart")时，浏览器会优先返回div元素而非canvas，导致无法获取绘图所需的2D上下文，这也是条形图加载失败的原因之一。

修复步骤 #

1. 更新Chart.js版本并适配饼图代码

把头部的Chart.js引用替换为最新稳定版：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.8/chart.umd.min.js"></script>

同时更新饼图的初始化代码，适配新版本语法：

var ctx = document.getElementById("pieChart").getContext("2d");
var myNewChart = new Chart(ctx, {
    type: 'polarArea',
    data: data,
    options: {}
});

2. 修正重复ID

修改canvas的ID，避免和外层div重复：

<canvas height="400" id="barChartCanvas" width="400"></canvas>

同步修改条形图JS代码里的获取元素语句：

var ctx = document.getElementById("barChartCanvas").getContext("2d");

额外提示 #

如果之前单独测试条形图时用的是新版本Chart.js，那就能解释为什么单独文件正常、粘到index.html就失效——因为index.html里用的是旧版本。

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