Angular2 + Google Charts. Come integrare i grafici di Google in Angular2?

Question

Desidero integrare Google Charts nella mia applicazione Angular2. Qual è il modo di fare questo? Esiste qualche esempio?

Ho provato a caricare il pacchetto come Google Charts è stato demoato ma ho avuto problemi con il caricamento. Ho provato angular2-google-chart ... ma non sono riuscito a farlo funzionare.

Grazie per il vostro aiuto.

Answer 1

Ecco come l'ho risolto.

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

Ora tutto quello che dovete fare è aggiungere questo alla tua index.html

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

Answer 2

Questa soluzione è adatta se si utilizza il routing. È possibile creare un Resolver che inizializzerà e risolverà l'oggetto google, che è possibile iniettare nel componente.

In primo luogo è necessario aggiungere la riga seguente alla fine del index.html

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

Quindi è necessario creare un Resolver dicono, di nome 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; 
     }); 
     }); 
    } 
    } 
} 

Per ogni percorso e componenti è necessario un'istanza di google, è possibile aggiungere le righe che seguono. È necessario aggiungere il GoogleChartResolver alla lista di osservabili da risolvere per il percorso,

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

Nel MyComponent si può inejct ActivatedRoute e ottenere l'istanza del google dalla snapshot

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

constructor(private route: ActivatedRoute) {} 

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

Tutto il le risorse dipendenti per i grafici di Google verranno caricate durante la prima volta che proverai a risolvere il Resolver (qui, la prima volta che visiti lo /my-path). Nelle risoluzioni successive, viene restituito l'oggetto già risolto (non è richiesto alcun recupero di risorse). Anche questo approccio carica tutti i pacchetti di grafici contemporaneamente. Se è necessario ottimizzare ulteriormente, è possibile caricare diversi pacchetti di grafici utilizzando diversi risolutori, ma potrebbe essere eccessivo, una soluzione per questo sarà, invece di creare classi Resolver, è possibile ottenere la route resolve utilizzando il metodo di riferimento (ad esempio crea un metodo statico in un servizio che fa la stessa cosa).

Answer 3

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

33,5 KB caricati dai server di google alla tua app.

ora Aggiungi

declare var google:any; 

al componente e aggiungere il codice grafico di Google in 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); 
    } 
} 

} 

ulteriore 35.8 KB caricati da server di google quando viene caricato 'corechart'.

aggiungere questo alla tua componenti HTML

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

Un approccio migliore sarebbe quella di utilizzare ViewChild invece di document.getElementById('piechart') nel file di ts componente.