angular 如何使用nvd3

在Angular中使用nvd3，可以首先安装nvd3和d3.js，可以使用npm或者yarn进行安装。

npm install d3 --save
npm install nvd3 --save

或者

yarn add d3
yarn add nvd3

安装完成后，可以在组件中引入nvd3和d3.js库：

import * as d3 from 'd3';
import 'nvd3';

在组件中，创建一个数据集，然后设置图表参数，并在ngOnInit函数中生成图表：

import { Component, OnInit } from '@angular/core';
import * as d3 from 'd3';
import 'nvd3';

@Component({
  selector: 'app-nvd3-chart',
  template: '<nvd3 [options]="options" [data]="data"></nvd3>',
})
export class Nvd3ChartComponent implements OnInit {
  data: any;
  options: any;

  ngOnInit(): void {
    this.data = [
      {
        key: "Cumulative Return",
        values: [
          { "label": "A", "value": 10 },
          { "label": "B", "value": 20 },
          { "label": "C", "value": 30 },
          { "label": "D", "value": 40 },
          { "label": "E", "value": 50 },
          { "label": "F", "value": 60 },
          { "label": "G", "value": 70 }
        ]
      }
    ];

    this.options = {
      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);
        },
        duration: 500,
        xAxis: {
          axisLabel: 'X Axis'
        },
        yAxis: {
          axisLabel: 'Y Axis',
          axisLabelDistance: -10
        }
      }
    };
  }
}

最后，在模板文件中使用nvd3组件来显示图表，例如：

<nvd3 [options]="options" [data]="data"></nvd3>

这样就可以在Angular中使用nvd3来生成图表了。