使用Node的NVD3图表

Question

我已经使用nvd3.js图表库创建了简单的离散条形图。我成功地通过我的browser(来自NVD3 chart examples的discretebarchart.html).Now运行了它，我正在尝试用NODE.js构建相同的离散条形图。但是我无法在我的nodejs服务器中加载nvd3库源模块，因为它不在NPM中。

谁能告诉我如何使用Node加载NVD3模块和生成NVD3图表？Node js中没有NVD3模块的包。作为具有D3.js包的Node js

d3 = npm install d3;

你对NVD3和Node的帮助将是非常大的！

Answer 1

您必须下载nv.d3.js，然后将其包含在您的项目中。您没有说如何使用Node.js提供页面服务。如果您提供的是单独的html文件，则可以使用典型脚本标记将其包含在相关文件中。This question建议使用其他类似节点的方法将纯js文件拉入节点项目中。

然而，nvd3似乎依赖于window对象，这也是我目前遇到的问题。祝你好运！

Answer 2

现在有一个用于NVD3的包：https://www.npmjs.com/package/nvd3

Answer 3

我使用nvd3。我下载了lib，然后将lib添加到我的assets文件夹中，并将lib文件包含在我的routes文件中。然后我可以直接在我的控制器上使用

dashboardController：

 var app = angular.module('dashboard.controller',['nvd3','ui.bootstrap','ui.utils']);

路由文件：

.state('app.dashboard', {
          url: '/dashboard',
          templateUrl: 'app/components/dashboard/dashboardView.html',
          data: {
            title: 'Dashboard',
          },       
          resolve: {
            deps: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load([
                {
                  insertBefore: '#load_styles_before',
                  files: [
                    'assets/libs/nvd3/nv.d3.min.css',
                    'assets/libs/datatables/css/jquery.dataTables.css' ]
                },{
                  name: 'nvd3',
                  serie: true,
                  files: [
                    'assets/libs/d3/d3.min.js',
                    'assets/libs/nvd3/nv.d3.min.js',
                    'assets/libs/angular-nvd3/angular-nvd3.min.js',
                    'assets/libs/datatables/js/jquery.dataTables.js',
                    'assets/libs/bootstrap-datatables/bootstrap-datatables.js',
                    'app/components/dashboard/warning.js',
                    'assets/libs/moment/moment.min.js'                    
                  ]
                }
              ]).then(function () {
                return $ocLazyLoad.load('app/components/dashboard/dashboardController.js');
              });
            }]
          }
        })