web-dev-qa-db-fra.com

Angular2 + Google Charts. Comment intégrer Google Charts dans Angular2?

Je souhaite intégrer Google Charts à mon application Angular2 . Quel est le moyen de le faire? Des exemples sont-ils disponibles?

J'ai essayé de charger le paquet car Google Charts est en démo mais j'ai eu des problèmes avec le chargement ... J'ai essayé angular2-google-chart ... mais je n'ai pas réussi à le faire fonctionner.

Merci de votre aide.

angulargoogle-visualization
11
BuckBazooka

Voici comment je l'ai résolu.

import { Component} from '@angular/core';
import { GoogleChartComponent} from './ChartComponent.js';

@Component({
  selector: 'evolution',
  template: `
    <div class="four wide column center aligned">
        <div id="chart_divEvolution" style="width: 900px; height: 500px;"></div>
    </div>
  `
})
export class EvolutionComponent extends GoogleChartComponent {
  private options;
  private data;
  private chart;
  constructor(){
    console.log("Here is EvolutionComponent")
  }

  drawGraph(){
    console.log("DrawGraph Evolution...");  
    this.data = this.createDataTable([
      ['Evolution', 'Imports', 'Exports'],
      ['A', 8695000, 6422800],
      ['B', 3792000, 3694000],
      ['C', 8175000, 800800]
    ]);

    this.options = {
      title: 'Evolution, 2014',
      chartArea: {width: '50%'},
      hAxis: {
        title: 'Value in USD',
        minValue: 0
      },
      vAxis: {
        title: 'Members'
      }
    };

    this.chart = this.createBarChart(document.getElementById('chart_divEvolution'));
    this.chart.draw(this.data, this.options);
  }
}

import { Component, OnInit} from '@angular/core';
declare var google:any;
@Component({
  selector: 'chart'
})
export class GoogleChartComponent implements OnInit {
  private static googleLoaded:any;

  constructor(){
      console.log("Here is GoogleChartComponent")
  }

  getGoogle() {
      return google;
  }
  ngOnInit() {
    console.log('ngOnInit');
    if(!GoogleChartComponent.googleLoaded) {
      GoogleChartComponent.googleLoaded = true;
      google.charts.load('current',  {packages: ['corechart', 'bar']});
    }
    google.charts.setOnLoadCallback(() => this.drawGraph());
  }

  drawGraph(){
      console.log("DrawGraph base class!!!! ");
  }

  createBarChart(element:any):any {
      return new google.visualization.BarChart(element);
  }

  createDataTable(array:any[]):any {
      return google.visualization.arrayToDataTable(array);
  }
}

Il ne vous reste plus qu'à l'ajouter à votre index.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
25
BuckBazooka
//in index.html add
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

33,5 Ko chargés depuis des serveurs Google vers votre application.

maintenant ajouter 

declare var google:any;

à votre composant et ajoutez votre code graphique Google dans ngOnInit.

import { Component, OnInit } from '@angular/core';
declare var google:any;

@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.css']
})
export class ChartsComponent implements OnInit {

constructor() { 

}

ngOnInit() {

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }
}

}

35,8 Ko supplémentaires chargés à partir de serveurs Google lorsque "corechart" est chargé.

ajoutez ceci à vos composants html

<div id="piechart" style="width: 900px; height: 500px;"></div>

Une meilleure approche consisterait à utiliser ViewChild au lieu de document.getElementById('piechart') dans le fichier ts du composant.

3
George Itty

Cette solution convient si vous utilisez le routage. Vous pouvez créer une Resolver qui initialisera et résoudra l'objet google, que vous pourrez injecter dans votre composant. 

Vous devez d’abord ajouter la ligne ci-dessous à la fin de index.html

// index.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Ensuite, vous devez créer un Resolver dire, nommé GoogleChartResolver.

// shared/google-chart.resolver.ts
declare const google: any;

@Injectable()
export class GoogleChartResolver implements Resolve<any>{

  private static googleChartLoaded: boolean = false;
  constructor() {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {

    if(GoogleChartResolver.googleChartLoaded){
      return Observable.of(google);
    } else {
      return Observable.create(function (observer: Observer<any>) {

        google.charts.load('current', {packages: ['corechart', 'bar']});
        google.charts.setOnLoadCallback(() => {
          observer.next(google);
          observer.complete();
          GoogleChartResolver.googleChartLoaded = true;
        });
      });
    }
  }
}

Pour chaque itinéraire et composant dont vous avez besoin d'une instance de google, vous pouvez ajouter les lignes ci-dessous. Vous devez ajouter la GoogleChartResolver à la liste des observables à résoudre pour la route,

// app-routing.module.ts
{path: 'my-path', component: MyComponent, resolve: {google: GoogleChartResolver}}

Dans MyComponent, vous pouvez inejct ActivatedRoute et obtenir l'instance de google à partir de l'instantané.

// my.component.ts
private google: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.google = this.route.snapshot.data.google;
  drawChart(this.google)
}

Toutes les ressources dépendantes des graphiques Google seront chargées lors de la première tentative de résolution du résolveur (ici, la première fois que vous visitez /my-path). Lors des résolutions suivantes, l'objet déjà résolu est renvoyé (aucune récupération de ressource n'est requise). De plus, cette approche charge tous les packages de diagramme en même temps . Si vous souhaitez optimiser davantage, vous pouvez charger différents packages de diagramme à l'aide de différents résolveurs, mais il peut s'agir d'une surcharge, une solution à cela serait plutôt que de créer des classes Resolver. vous pouvez obtenir la fonctionnalité route resolve en utilisant la référence de la méthode (par exemple, créez une méthode statique dans un service faisant la même chose).

2
Jos Angel George

Si vous demandez un composant similaire à utiliser, veuillez vous reporter ci-dessous: ng2-google-charts . https://www.npmjs.com/package/ng2-google-charts . Il utilise en interne le chargeur .js google library to render library . Vous pouvez utiliser la configuration pour les graphiques par le biais d'entrées.

0
Nikhil_k