nvd3 和 angularjs 多条形图

Question

我正在尝试使用 angular 和 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);
          });
        };