• 追加された行はこの色です。
• 削除された行はこの色です。
• Angular2/Google Chartsを使う へ行く。
• Angular2/Google Chartsを使う の差分を削除

* キーワード [#mf185eaf]
- Angular2
- Google Charts
- declare

* したいこと [#c6a945c0]

Angular2で作るページにGoogle Chartsを載せたい。

* どうやって [#y66bf9d4]

** 用意するもの [#we9cc4cf]
- index.html
- チャート用のテンプレート
- チャート用のComponent
- 使う側のテンプレート

** index.html [#o2c393d0]

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart', 'geochart', 'annotationchart']});
 </script>

index.htmlから普通にGoogle Chartsを使うように書く。パッケージは使うものを任意で。

** チャート用のテンプレート [#gabbb347]

 <div [id]="elementId"></div>

idはchart描画でgetElementByIdするときに使う。

** チャート用のComponent [#ic9f949b]

 import {
   Component,
   OnInit,
   Input,
   HostListener
 } from '@angular/core';
 
 declare var google: any;
 
 @Component({
   selector: 'app-my-pie-chart',
   templateUrl: './my-pie-chart.component.html',
   styleUrls: ['./my-pie-chart.component.css']
 })
 export class MyPieChartComponent implements OnInit {
 
   elementId: string;
 
   constructor() { }
 
   ngOnInit() {
     this.elementId = ’my-pie-chart’;
   }
 
   ngAfterViewInit() {
     google.charts.setOnLoadCallback(() => this.drawChart());
   }
 
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.drawChart();
   }
 
   drawChart() {
 
     // data
     let data = new google.visualization.DataTable();
     data.addColumn('string', 'Topping');
     data.addColumn('number', 'Slices');
     data.addRows([
       ['Mushrooms', 3],
       ['Onions', 1],
       ['Olives', 1],
       ['Zucchini', 1],
       ['Pepperoni', 2]
     ]);
 
     // options
     let options = {
       title: 'How Much Pizza I Ate Last Night'
     };
 
     // draw
     let chart = new google.visualization.PieChart(document.getElementById(this.elementId));
     chart.draw(data, options);
 
   }
 
 }

大事なところは次。

*** 外部ライブラリの利用 [#k8ae9f8a]

 declare var google: any;

なんとこれだけでgoogle.*が普通に使える。（jQueryも同じようにいける）

*** 描画関数の登録 [#s5edb44d]

   ngAfterViewInit() {
     google.charts.setOnLoadCallback(() => this.drawChart());
   }

ngOnIinitではidを与える前に動いてしまうのかエラーになった。ので、描画後イベントにした。

*** リサイズに対応 [#b729745a]

   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.drawChart();
   }

リサイズイベントはデコレータでとるのがいいと思う。

** 使う側のテンプレート [#r6a6d93c]

 <app-my-pie-chart></app-my-pie-chart>

使うだけ。

* ノート [#hf5bf92a]

declareで外部のJavaScriptコードがなんでも呼べる。jQueryだって使える。

* 参考 [#i74bb0b7]
- [[Angular2 + Google Charts. How to integrate Google Charts in Angular2? - Stack Overflow>http://stackoverflow.com/questions/37542408/angular2-google-charts-how-to-integrate-google-charts-in-angular2]]
- [[Quick Start &nbsp;|&nbsp; Charts &nbsp;|&nbsp; Google Developers>https://developers.google.com/chart/interactive/docs/quick_start]]