使用 angular-nvd3 在 angular 中渲染一个 d3 饼图

Question

我想用 angular-nvd3 在 angular 中渲染一个 d3 饼图。我没有错误，所有相关脚本都在加载。

我不确定如何在指令中调用函数-- 提供的指令是：

<nvd3 options='options' data='data'></nvd3>

我改成了：

<nvd3 options='vm.options' data='vm.data'></nvd3>

HTML:

  <div ng-controller='MainController'>
    <nvd3 options='vm.options' data='vm.data'></nvd3>
  </div>

main.controller:

(function (angular) {
    'use strict';
    angular
        .module('blah').controller('MainController', MainController);

    function MainController () {
        var vm = this;

        vm.initSampleData = initSampleData; // set up the var

        function initSampleData() {
            vm.options = {
                'chart': {
                    'type': 'pieChart',
                    'height': 500,
                    'showLabels': true,
                    'duration': 500,
                    'labelThreshold': 0.01,
                    'labelSunbeamLayout': true,
                    'legend': {
                        'margin': {
                            'top': 5,
                            'right': 35,
                            'bottom': 5,
                            'left': 0
                        }
                    }
                }
            };

            vm.data = [
                {key: 'One', y: 5},
                {key: 'Two', y: 2},
                {key: 'Three', y: 9},
                {key: 'Four', y: 7},
                {key: 'Five', y: 4},
                {key: 'Six', y: 3},
                {key: 'Seven', y: .5}
            ];
        }
    }

})(window.angular);

路由（不使用指令，为 angular 2.0 做好准备）如果我添加 MainRoute.$inject = ['$routeProvider', 'nvd3'];它出错了...

function MainRoute($routeProvider){
        $routeProvider.when('/', {
            controller: 'MainController as vm',
            templateUrl : 'main.html',
            bindToController: false
        });
    }

Answer 1

我认为你需要为你的控制器创建一个别名，它会解决你的问题。

<div ng-controller='MainController as vm'>

您已将 data 分配给控制器对象，但在视图中，在您给控制器别名之前，它可以用自己的名称调用，因此在添加别名之前它是 MainController.data，之后你像我之前提到的那样添加它 - vm.data。

希望对您有所帮助

已编辑

这是 Plunker 的工作代码。您的问题是：

您没有使用 ng-app="yourModule"
您插入了路由但没有使用<ui-view>让他们知道应该在哪里使用

使用 angular-nvd3 在 angular 中渲染一个 d3 饼图

Render a d3 pie chart in angular with angular-nvd3

javascript

angularjs

d3.js

nvd3.js