angular - 如何使用 Angular 为 2 或 4 的 D3 图表

Question

我想在我的一个项目中使用 D3 图表，请帮忙。

我尝试按照安装过程进行操作。但它不能正常工作，请给我提供另一个解决方案，以便可以在现有项目中实现它。

npm install d3-ng2-service --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

import { D3Service } from 'd3-ng2-service'; // <-- import statement

@NgModule({
  declarations: [
    AppComponent,
    TestD3Component // <-- declaration of the D3 Test component used below
  ],
  imports: [
    BrowserModule,
    CommonModule,
    FormsModule
  ],
  providers: [D3Service], // <-- provider registration
  entryComponents: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {

}

Answer 1

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

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