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

Question

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

我试着按照安装过程.但它没有正常工作peasen为我提供了另一个解决方案,因此可以在现有项目中实现它.

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>