nvd3和angularjs多條形圖

Question

我想繪製一個帶有角度和nvd3的多條形圖。 HTML部分是

<div class="box-body"> 
      <nvd3-multi-bar-chart 
      data="dashCtrl.thumbsUpDown" 
      id="noDataExample" 
      width="550" 
      height="300" 
      showXAxis="true" 
      showLegend="true"> 
      <svg></svg> 
      </nvd3-multi-bar-chart> 
     </div> 
     </div> 

和數據

[{"key":"5","values":[{"up":0,"down":1}]},{"key":"6","values":[{"up":0,"down":1}]},{"key":"7","values":[{"up":0,"down":1}]}] 

是在這個函數設置控制器

vm.getThumbsUpDownChartData = function(){ 
     projectFactory.getThumsUpDownChartData(vm.project.id).success(function(response){ 
      console.log(JSON.stringify(response)); 
      vm.thumbsUpDown = response; 
     }); 
    }; 

沒有錯誤就顯示在控制檯上，並在頁面上我什麼也沒得到。

編輯：

我bower.json看起來像這樣

{ 
    "name": "client", 
    "version": "1.0.0", 
    "dependencies": { 
    "angular": "^1.3.0", 
    "bootstrap": "^3.3.4", 
    "angular-animate": "^1.3.0", 
    "angular-cookies": "^1.3.0", 
    "angular-resource": "^1.3.0", 
    "angular-sanitize": "^1.3.0", 
    "angular-touch": "^1.3.0", 
    "angular-ui-router": "~0.2.15", 
    "angular-nvd3": "~0.1.1", 
    "admin-lte": "~2.2.0", 
    "adminlte-bower": "2.1.1.2", 
    "angularjs-nvd3-directives": "~0.0.7", 
    "font-awesome": "4.3.0" 
    }, 
    "devDependencies": { 
    "angular-mocks": "^1.3.0" 
    }, 
    "appPath": "app", 
    "moduleName": "app", 
    "overrides": { 
    "bootstrap": { 
     "main": [ 
     "less/bootstrap.less", 
     "dist/css/bootstrap.css", 
     "dist/js/bootstrap.js" 
     ] 
    } 
    }, 
    "resolutions": { 
    "angular": "1.4.3", 
    "d3": "~3.4.1", 
    "jquery": "~2.1.4", 
    "components-font-awesome": "^4.3" 
    } 
} 

Answer 1

更改您控制器代碼如下

vm.thumbsUpDown = []; 

... 
... 

    vm.getThumbsUpDownChartData = function(){ 
      projectFactory.getThumsUpDownChartData(vm.project.id).success(function(response){ 
       console.log(JSON.stringify(response)); 
       Array.prototype.push.apply(vm.thumbsUpDown, response); 
      }); 
     };