如何在Angular JS项目中使用Angular-nvd3？多组件图表实现咨询

别担心，刚上手AngularJS + angular-nvd3的时候确实容易在依赖注入和组件用法上卡壳，我来一步步帮你理清：

一、核心依赖注入位置 #

你需要在定义Angular模块的时候注入nvd3依赖，这是最基础的一步：

1. 如果你有一个主应用模块（比如叫myApp），在初始化时就要把nvd3加进去：

// 主模块定义
angular.module('myApp', ['nvd3']);

2. 如果你的ghbar是一个独立的子组件，那么它所属的模块同样需要依赖nvd3：

// 子组件所在模块
angular.module('myApp.components', ['nvd3']);

// 定义ghbar组件
angular.module('myApp.components')
  .component('ghbar', {
    templateUrl: 'ghbar.component.html',
    controller: GhbarController
  });

二、ghbar组件实现柱状图示例 #

1. 组件模板（ghbar.component.html） #

直接使用nvd3指令，绑定图表配置和数据：

<nvd3 options="vm.chartOptions" data="vm.chartData"></nvd3>

2. 组件控制器（GhbarController.js） #

在控制器里配置柱状图的选项和模拟数据：

function GhbarController() {
  var vm = this;

  // 柱状图配置选项
  vm.chartOptions = {
    chart: {
      type: 'discreteBarChart',
      height: 450,
      margin : {
        top: 20,
        right: 20,
        bottom: 50,
        left: 55
      },
      x: function(d){ return d.label; },
      y: function(d){ return d.value; },
      showValues: true,
      valueFormat: function(d){
        return d3.format(',.4f')(d);
      },
      transitionDuration: 500,
      xAxis: {
        axisLabel: '类别'
      },
      yAxis: {
        axisLabel: '数值',
        axisLabelDistance: -10
      }
    }
  };

  // 模拟柱状图数据
  vm.chartData = [
    {
      key: '柱状图系列',
      values: [
        { "label" : "A" , "value" : 10 },
        { "label" : "B" , "value" : 20 },
        { "label" : "C" , "value" : 15 },
        { "label" : "D" , "value" : 25 }
      ]
    }
  ];
}

三、完整项目示例参考 #

一个简单的AngularJS + angular-nvd3项目结构大概是这样的：

my-app/
├── index.html
├── app.js
├── components/
│   ├── ghbar/
│   │   ├── ghbar.component.html
│   │   └── GhbarController.js
└── lib/
    ├── angular.js
    ├── d3.js
    ├── nvd3.js
    └── angular-nvd3.js

在index.html里要按顺序引入依赖脚本：

<script src="lib/angular.js"></script>
<script src="lib/d3.js"></script>
<script src="lib/nvd3.js"></script>
<script src="lib/angular-nvd3.js"></script>
<script src="app.js"></script>
<script src="components/ghbar/GhbarController.js"></script>

内容的提问来源于stack exchange，提问作者Alapan Bag