각도 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

난이 후

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에 스타일을 추가 할 필요도 그리고 그것을

npm install ng2-nvd3 --save 

를 설치 NgModule에 그것을 가져오고 D3와 nvd3를 가져올 필요가 필요

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

다음 파일 -cli.json 당신은 내가,691을 사용하고이 예에서 component.ts 파일에 가야app.component.ts는 당신은 app.component.html

입니다 그것은 당신의 HTML에서 수행되면 차트

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 
     } 
    ]; 
    } 
} 

지침 데이터 및 옵션 개체를 제공해야 내 예제 차트 지침을 제공해야

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