google - angular 2 charts

Angular2+Google Charts. ¿Cómo integrar Google Charts en Angular2?

Question

Quiero integrar Google Charts en mi aplicación Angular2. ¿Cuál es la manera de hacer esto? ¿Hay algún ejemplo disponible?

Traté de cargar el paquete, como Google Charts está demog, pero tuve problemas con la carga. Intenté angular2-google-chart ... pero no logré que funcionara.

Gracias por tu ayuda.

Answer 1

Así es como lo resolví.

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

Ahora todo lo que necesita hacer es agregar esto a su index.html

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

Answer 2

Esta solución es adecuada si usa enrutamiento. Puede crear un Resolver que inicialice y resuelva el objeto google , que puede inyectar en su componente.

Primero debe agregar la línea siguiente al final de index.html

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

Luego necesita crear un Resolver , llamado 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;
        });
      });
    }
  }
}

Para cada ruta y componente que necesita una instancia de google , puede agregar las siguientes líneas. GoogleChartResolver agregar GoogleChartResolver a la lista de Observables que se resolverán para la ruta,

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

En ChartComponent puede usar ActivatedRoute y obtener la instancia de google de la instantánea

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

constructor(private route: ActivatedRoute) {}

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

Todos los recursos dependientes para los gráficos de Google se cargarán la primera vez que intente resolver el Resolver (aquí, la primera vez que visita /chart ). En resoluciones posteriores, se devuelve el objeto ya resuelto (no se requiere búsqueda de recursos). Además, este enfoque carga todos los paquetes de Chart a la vez. Si necesita optimizar aún más, puede cargar diferentes paquetes de gráficos utilizando diferentes resolutores, pero puede ser una exageración, una solución para esto será que, en lugar de crear clases de resolve , puede lograr la funcionalidad de resolve ruta usando la referencia de método (por ejemplo, crear un método estático en un servicio que hace lo mismo).

Answer 3

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

33.5 KB cargado desde los servidores de Google a su aplicación.

ahora agrega

declare var google:any;

a su componente y agregue su código de tabla de Google en 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 KB adicionales cargados desde los servidores de Google cuando se carga ''corechart''.

agregue esto a sus componentes html

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

Un mejor enfoque sería usar ViewChild en lugar de document.getElementById(''piechart'') en el archivo componente ts.