Question

我对javascript很新，我正在尝试实现一个用户界面，其中图表是在类似聊天机器人的网页中生成的。整个项目可以在这里找到：https://jsfiddle.net/6cfL8f3b/#&togetherjs=xP8EBTR8SH

每按一次enter旋钮使用Chart.js，下面的函数将创建一个新图表。

function drawChart(){
  $('<canvas id="chart"'+j+' class="chart"></canvas>').appendTo($('.mCSB_container')).addClass('new');
  a = String('chart'+j);
  console.log(a);
  new Chart(document.getElementById(a), {
      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++;
}

在新Chart(document.getElementById(a)

时出现null属性lentgh错误

使用普通ID，这很有效，但目标是生成多个图表。有人能指出我的问题吗？提前致谢

Answer 1

你的问题在这里：

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

将其替换为：

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

您在id之前关闭了j属性。

无法读取属性＆＃39;长度＆＃39; Javascript中的null错误

1 个答案: