wake-up-neo.com

Wie füge ich ein Google Chart in Angular 4 ein?

Wie integrieren Sie ein Google-Diagramm in eine Winkel-4-Anwendung? 

Ich habe die Antwort auf die SO - Frage hier gelesen, aber ich glaube, dass sie unvollständig ist. Im Grunde versuche ich dieselbe Strategie wie die vorige Antwort, indem ich eine GoogleChartComponent und eine andere Komponente, die sie erweitert, verwendet. Zwei Fehler treten auf, der erste ist ein fehlender Aufruf von super () für die untergeordnete Komponente und der zweite ist der Aufruf von "neu" in diesem Code 

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

Ich erhalte die Fehlermeldung "google.visualization.BarChart ist kein Konstruktor". 

Ich sehe, dass einer der Kommentare auch die Verwendung von <ng-content> für die Datenprojektion erwähnt, aber es ist nicht klar umrissen.

Beim Versuch, eine "gute" Frage zu stellen, ist hier meine 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);
  }
}

Und meine Kindkomponente, die es erweitert:

@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);
  }
}
8
Frederick John

google.visualization.BarChart ist Teil des 'corechart'-Pakets 

muss die Ladeanweisung ändern ... 

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

das 'bar'-Paket ist für die Diagrammversion Material
Welches wäre -> google.charts.Bar

es gibt jedoch viele Konfigurationsoptionen, die von Material - Diagrammen nicht unterstützt werden ... 

für die vollständige Liste der nicht unterstützten Optionen -> Verfolgungsproblem für Feature-Parität des Materialdiagramms

3
WhiteHat

Ich glaube, es gibt eine bessere Möglichkeit, Google Chart in Angular 4 zu integrieren. Library ng2-google-charts hat bereits GoogleChartComponent. Der Link zur npm-Seite beschreibt ziemlich gut, wie man ihn benutzt. Unten ist ein Beispiel für eine Komponente:

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

Und Ihr Markup würde so aussehen:

<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