使用 Node js 的 NVD3 图表答案

【问题标题】：NVD3 charts using Node js使用 Node js 的 NVD3 图表
【发布时间】：2013-09-30 13:18:54
【问题描述】：

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

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

d3 = npm install d3;

您对 NVD3 和 Node js 的帮助会很棒！

【问题讨论】：

标签： node.js d3.js nvd3.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

仪表板控制器：

 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');
              });
            }]
          }
        })

【讨论】：