角度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チャートの2つの実装

1.ng2-nvd3チャート

2.ngxチャート

だから私はNG2-nvd3チャート

を実装するつもりがありますもクローンできます。 https://github.com/DevInder1/ng2-nvd3-charts

まずNgModuleでそれをインポートしても、私は

あなたが.angularにスタイルを追加する必要があり、この後

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 { } 

の下にインポートしていますとD3とnvd3をインポートする必要が続いて

npm install ng2-nvd3 --save 

にそれをインストールする必要があります私はを使用していますが、この例では、あなたのcomponent.tsファイルに行かなければなら

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

次のファイル-cli.jsonapp.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>