JavaScript中Cannot read property 'length' of null错误：多Chart.js图表生成问题

嘿，我看了你的代码，问题出在Canvas元素的ID拼接错误上，导致Chart.js找不到对应的DOM元素，咱们一步步来理清楚：

核心问题 #

你创建Canvas的代码里，ID的字符串拼接语法有误：

$('<canvas id="chart"'+j+' class="chart"></canvas>')

当j=1时，这段代码会生成这样的HTML：

<canvas id="chart"1 class="chart"></canvas>

看到了吗？ID的属性值被错误地拆成了chart"，后面的1变成了无效的属性内容，而你变量a的值是chart1，这就导致document.getElementById(a)根本找不到对应的Canvas元素，自然初始化Chart会失败。

修正后的代码 #

只需要把Canvas的ID拼接改成正确的格式，让ID值完整包含chart+j即可：

// 先确保j在函数外正确初始化，比如：
let j = 1;

function drawChart(){
  // 修正ID的拼接方式，把j放在引号内部
  $('<canvas id="chart'+j+'" class="chart"></canvas>').appendTo($('.mCSB_container')).addClass('new');
  const chartId = 'chart' + j;
  console.log(chartId);
  new Chart(document.getElementById(chartId), {
    type: 'bar',
    data: {
      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
      datasets: [
        { 
          label: "Population (millions)", 
          backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], 
          data: [2478,5267,734,784,433] 
        }
      ]
    },
    options: {
      legend: { display: false },
      title: { display: true, text: 'Predicted world population (millions) in 2050' }
    }
  });
  j++;
}

额外优化建议 #

如果你的环境支持ES6+语法，用模板字符串会让代码更易读，避免拼接错误：

$(`<canvas id="chart${j}" class="chart"></canvas>`).appendTo($('.mCSB_container')).addClass('new');

另外，建议用const/let声明变量（比如上面的chartId），代替全局的a变量，避免变量污染。

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