0

如何让 angular-nvd3 与 Browserify 一起使用？我通过安装，npm install angular-nvd3然后使用以下内容创建我的模块。

require('angular').module('myApp', [require('angular-nvd3')]);

我的控制器看起来像

require('angular')
  .module('myApp')
  .controller('MyCtrl', function() {
    var ctrl = this;

    ctrl.nvd3Options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 60,
                left: 55
            },
            // ...other options from demo...
        }
    };

    ctrl.nvd3Data = [{
        key: "Cumulative Return",
        values: [
            { "label" : "A" , "value" : -29.765957771107 },
            // ...other data from demo...
        ]
    }];
  });

我的 HTML 看起来像

<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
  <nvd3 options='ctrl.nvd3Options' data='ctrl.nvd3Data'></nvd3>
</div>

但我收到错误ReferenceError: nv is not defined@ angular-nvd3.js:250（使用v1.0.5）。

我认为安装和需要 angular-nvd3 将处理所有依赖项（即 nvd3 和 d3）。但是这些依赖关系没有得到处理。

当前的解决方法

为了解决这个问题，我<script>在我的 HTML 中明确安装了 d3 和 nvd3 以及它们；（但这只是违背了目的。

4

1 回答 1

1

我找到了更好的方法。添加

global.d3 = require('d3'); // nvd3 assumes that d3 is global
require('nvd3');

无论您在哪里定义模块，并确保将这些包添加到您的package.json 依赖项中。

然后我以通常的方式浏览器化（在我的情况下是 gulp）。

于 2016-03-31T15:24:00.707 回答