web-dev-qa-db-ja.com

Angular2 + Googleチャート。 Google ChartをAngular2に統合する方法は？

Angular2アプリケーションにGoogle Chartを統合したい。これを行う方法は何ですか？利用可能な例はありますか？

Google Chartsがデモされるようにパッケージをロードしようとしましたが、ロードに問題がありました。 angular2-google-chart ...を試しましたが、うまく機能しませんでした。

ご協力いただきありがとうございます。

angulargoogle-visualization
11
BuckBazooka

ここで私はそれを解決した方法です。

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

これで、これを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>
_

Googleサーバーからアプリに33.5KBが読み込まれました。

今追加します

_declare var google:any;
_

あなたのコンポーネントにあなたのグーグルチャートコードを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);
  }
}

}
_

「corechart」が読み込まれると、追加の35.8KBがgoogleサーバーから読み込まれます。

これをコンポーネントのhtmlに追加します

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

より良いアプローチは、コンポーネントtsファイルでdocument.getElementById('piechart')の代わりにViewChildを使用することです。

3
George Itty

このソリューションは、ルーティングを使用している場合に適しています。コンポーネントに挿入できるResolverオブジェクトを初期化して解決するgoogleを作成できます。

最初に、以下の行をindex.htmlの最後に追加する必要があります

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

次に、Resolverという名前の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;
        });
      });
    }
  }
}

googleのインスタンスが必要なすべてのルートとコンポーネントについて、以下の行を追加できます。ルートで解決するオブザーバブルのリストにGoogleChartResolverを追加する必要があります。

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

MyComponentでは、ActivatedRouteをinejctして、スナップショットからgoogleのインスタンスを取得できます

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

constructor(private route: ActivatedRoute) {}

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

Googleチャートのすべての依存リソースは、リゾルバーを初めて解決しようとしたときにロードされます（ここでは、/my-pathに初めてアクセスしたとき）。その後の解決では、既に解決されたオブジェクトが返されます（リソースのフェッチは必要ありません）。また、このアプローチは、すべてのチャートパッケージを一度にロードします。さらに最適化する必要がある場合は、さまざまなリゾルバーを使用してさまざまなチャートパッケージをロードできますが、それはやり過ぎかもしれません。これに対する解決策は、Resolverクラスを作成する代わりに、ルートresolveメソッド参照を使用した機能（たとえば、同じことを行うサービスで静的メソッドを作成します）。

2
Jos Angel George

使用するようなコンポーネントを求めている場合は、以下のng2-google-chartsを参照してください。 https://www.npmjs.com/package/ng2-google-charts 。内部的には、loader.js googleライブラリを使用してライブラリをレンダリングします。入力を介してチャートの構成を使用できます。

1
Nikhil_k