Question

我正在尝试创建一个简单的条形图，但是当将条形附加到DOM时，我会收到此错误

Object [object Object]没有方法'appendChild'

$rootScope.drawChart = function (data,selector,padding){
        var max = Math.max.apply(Math, data);
        var chart = angular.element(document.getElementById("chartxx"));
        var barwidth = ((chart.offsetWidth-(data.length-1)*padding-(data.length)*10)/data.length);
        var sum = data.reduce(function(pv, cv) { return pv + cv; }, 0);
        var left = 0;
        for (var i in data){
          var newbar = document.createElement('div');
          newbar.setAttribute("class", "bar");
          newbar.style.width=barwidth+"px";
          newbar.style.height=((data[i]/max)*100)+"%";
          newbar.style.left=left+"px";
          console.log(chart);
          angular.element(document.getElementById("chartxx")).appendChild(newbar);
          left += (barwidth+padding+10);
        }
}

        var values = [85,95,120,100,200,200,230,230,60,320,23,3433,434,45,23,23];

        $rootScope.drawChart(values,"#chartxx2",5); 




<div class="wrapperx2">
        <div id="chartxx"></div>  
      </div>

Answer 1

appendChild()是本机HTML对象固有的方法，也就是document.getElementById的结果。当您将该HTML对象提供给angular.element时，它将成为jQuery对象。 jQuery对象有一个名为append()

的类似方法

所以你可以document.getElementById("chartxx").appendChild(newbar)或angular.element(document.getElementById("chartxxx")).append(newbar)。

所以这应该回答你的问题，但我不能自问：当你使用AngularJS时，为什么会这样做？

修改

好的here's a very poorly achieved version我将在你的位置做什么（如果我绝对无法使用外部库，因为我通常会使用外部库来制作图表）。我建议您查看并尝试了解ng-repeat如何在此处运作，并尝试将其应用于您的案例。

Answer 2

angular.element不包含方法 appendChild

angular.element doc

您可以尝试：

chart.append(newbar);

AngularJS Object [object Object]没有方法'appendChild'

2 个答案:

修改