如何使用角度为2或4的D3图表

D3图表有两种实现方式

1.ng2-nvd3图表

2.ngx图表

所以我要实现ng2-nvd3图表

也可以从 https://github.com/DevInder1/ng2-nvd3-charts 克隆它

首先需要安装它

npm install ng2-nvd3 --save

然后在NgModule中导入它,还需要导入d3和nvd3,因为我在下面导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import 'd3';
import 'nvd3'
import {NvD3Module} from "ng2-nvd3";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NvD3Module,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在此之后,您必须在.angular-cli.json文件中添加样式

"styles": [
        "styles.css",
        "../node_modules/nvd3/build/nv.d3.css"
      ],

接下来,您必须转到此示例中的component.ts文件,我正在使用app.component.ts,您必须向图表指令提供数据和选项对象

import {Component} from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  options: any;
  data: any;


  constructor() {
    this.optiOns= {
      chart: {
        type: 'pieChart',
        height: 500,
        x: function (d) {
          return d.key;
        },
        y: function (d) {
          return d.y;
        },
        showLabels: true,
        duration: 500,
        labelThreshold: 0.01,
        labelSunbeamLayout: true,
        legend: {
          margin: {
            top: 5,
            right: 35,
            bottom: 5,
            left: 0
          }
        }
      }
    };

    this.data = [
      {
        key: "P60-1",
        y: 256
      },
      {
        key: "P60-2",
        y: 445
      },
      {
        key: "P40",
        y: 225
      },
      {
        key: "P73",
        y: 127
      },
      {
        key: "P71",
        y: 128
      }
    ];
  }
}

一旦它在您的Html中完成,需要在我的示例中提供Chart指令,它是app.component.html