web-dev-qa-db-fra.com

Comment utiliser les graphiques D3 avec un angle 2 ou 4

Je souhaite utiliser les graphiques D3 dans l'un de mes projets, merci de m'aider.

J'ai essayé de suivre le processus d'installation. mais cela ne fonctionne pas correctement peasen me fournit une autre solution afin de pouvoir la mettre en œuvre dans le projet existant.

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 {

}
angulard3.jscharts
2
Mahendra Waykos

Il y a deux implémentation des cartes D3 

Graphiques 1.ng2-nvd3

Graphiques 2.ngx

Je vais donc implémenter les cartes ng2-nvd3

peut également le cloner de https://github.com/DevInder1/ng2-nvd3-charts

D'abord besoin de l'installer

npm install ng2-nvd3 --save

Puis importez-le dans NgModule et avez également besoin d'importer d3 et nvd3, comme je l'importe ci-dessous 

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

Après cela, vous devez ajouter un style au fichier .angular-cli.json

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

Ensuite, vous devez accéder à votre fichier composant.ts dans cet exemple. J'utilise App.component.ts et vous devez fournir des données et un objet option à la directive chart .

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

une fois que cela est fait dans votre HTML, vous devez fournir la directive Chart dans mon exemple, il s'agit de app.component.html

<div>
  <nvd3 [options]="options" [data]="data"></nvd3>
</div>
9
INDERPREET THIARA

Solution de bout en bout pour ngx-nvd3. angulaire 6

Exigences: 

1.Install "d3": "^3.5.17"
2.Install "ngx-nvd3": "^1.0.9"

app.module.ts (appModule) 

import { NvD3Module } from 'ngx-nvd3'
imports: [NvD3Module]

admin.component.html (HTML) 

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

admin.component.ts (fichier .ts de composant) 

import * as d3 from "d3";

datas:any

styleUrls: ['./adminpanel.component.css','../../../node_modules/nvd3/build/nv.d3.css']

this.options = {
  chart: {
    type: 'discreteBarChart',
    height: 450,
    margin: {
      top: 20,
      right: 20,
      bottom: 50,
      left: 55
    },
    x: function (d) {
      return d.label;
    },
    y: function (d) {
      return d.value + (1e-10);
    },
    showValues: true,
    valueFormat: function (d) {
      return d3.format(',.4f')(d);
    },
    duration: 500,
    xAxis: {
      axisLabel: 'X Axis'
    },
    yAxis: {
      axisLabel: 'Y Axis',
      axisLabelDistance: -10
    }
  }
};

  this.datas = [
    {
      key: "Cumulative Return",
      values: [
        {
          "label" : "A" ,
          "value" : -29.765957771107
        } ,
        {
          "label" : "B" ,
          "value" : 0
        } ,
        {
          "label" : "C" ,
          "value" : 32.807804682612
        } ,
        {
          "label" : "d" ,
          "value" : 60.807804682612
        } ,
        {
          "label" : "e" ,
          "value" : 70.807804682612
        } ,
        {
          "label" : "f" ,
          "value" : 80.807804682612
        } ,
      ]
    }
  ];
0
Rohit Parte