web-dev-qa-db-fra.com

Comment mettre un graphique Google dans Angular 4

Comment intégrer un graphique Google dans une application angulaire 4? 

J'ai lu la réponse à la question SO ici , mais je pense que c'est incomplet. Fondamentalement, je tente la même stratégie que la réponse précédente, en utilisant un composant GoogleChartComponent et un autre composant qui l'étend. Deux erreurs se produisent, la première est un appel manquant à super () pour le composant enfant et la seconde est l'appel à "new" dans ce code 

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

Je reçois le message d'erreur "google.visualization.BarChart n'est pas un constructeur". 

Je vois qu'un des commentaires mentionne également l'utilisation de <ng-content> pour la projection de données, mais cela n'est pas clairement défini.

En essayant de poser une "bonne" question, voici mon GoogleChartComponent:

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': ['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);
  }
}

Et mon composant enfant qui l'étend:

@Component({
  selector: 'app-bitcoin-chart',
  template: `
   <div id="barchart_material" style="width: 700px; height: 500px;"></div>
  `,
  styles: []
})
export class BitcoinChartComponent extends GoogleChartComponent  {
 private options;
  private data;
  private chart;
  // constructor() {
  //   super();
  //   console.log('Bitcoin Chart Component');
  // }
  drawGraph() {
    console.log('Drawing Bitcoin Graph');
    this.data = this.createDataTable([
     ['Price', 'Coinbase', 'Bitfinex', 'Poloniex', 'Kraken'],
     ['*', 1000, 400, 200, 500]
    ]);

    this.options = {
     chart: {
                    title: 'Bitcoin Price',
                    subtitle: 'Real time price data across exchanges',
                },
                bars: 'vertical' // Required for Material Bar Charts.
    };

    this.chart = this.createBarChart(document.getElementById('barchart_material'));
    this.chart.draw(this.data, this.options);
  }
}
angulartypescriptchartsgoogle-visualization
8
Frederick John

google.visualization.BarChart fait partie du package 'corechart' 

besoin de changer l'instruction de chargement ... 

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

le package 'bar' correspond à la version du graphique Material
qui serait -> google.charts.Bar

cependant, de nombreuses options de configuration qui ne sont pas prises en charge par les diagrammes Material ... 

pour obtenir la liste complète des options non prises en charge -> Problème de suivi pour la parité des caractéristiques de la matière cartographique

3
WhiteHat

Je pense qu'il existe un meilleur moyen d'intégrer Google Chart dans Angular 4. Library ng2-google-charts a déjà GoogleChartComponent. Le lien vers la page npm décrit assez bien comment l’utiliser. Vous trouverez ci-dessous un exemple de composant:

import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {Component, ViewEncapsulation, OnInit} from '@angular/core';
import {ViewChild} from '@angular/core';

import {GoogleChartComponent} from 'ng2-google-charts';

// needed for advanced usage of ng2-google-charts
import {HostListener} from '@angular/core';

@Component({
  selector: '[your-widget]',
  templateUrl: './your-widget.html',
  encapsulation: ViewEncapsulation.None
})
export class YourWidget implements OnInit {

  // type GoogleChartComponent and import for it can be ommited
  @ViewChild('your_chart') chart: GoogleChartComponent;

  // shows spinner while data is loading
  showSpinner: boolean;

  public chartData = {
    chartType: 'AnyChartType', // your type
    dataTable: [
      ['Col1', 'Col2']
    ],
    options: {}
  };

  constructor() {
  }

  ngOnInit(): void {

    this.showSpinner = true;
    this.yourService.getData()
          .subscribe((data) => {
            //this.data = data;
            this.processYourData();
            this.showSpinner = false;
        });
      }

  private processYourData() {
  }

  // advanced usage of chart
  //   in this case redraw function on window:resize event
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: any) {
    // console.log(event.target.innerWidth);
    // Make sure you don't call redraw() in ngOnInit()
    //   - chart would not be initialised by that time, and
    //   - this would cause chart being drawn twice
    this.chart.redraw(); 
  }
}

Et votre balisage ressemblerait à ceci:

<header class="widget-handle">
  <h5>Widget Title</h5>
  <div class="widget-controls">
    <a title="Refresh">
      <i *ngIf="showSpinner" class="fa fa-refresh fa-spin"></i>
    </a>
  </div>
</header>

<div class="widget-body">
  <google-chart #your_chart [data]="chartData" *ngIf="!showSpinner">
  </google-chart>
</div>
3
ruruskyi