Angular2/Google Chartsを使う

キーワード

  • Angular2
  • Google Charts
  • declare

したいこと

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

どうやって

用意するもの

  • index.html
  • チャート用のテンプレート
  • チャート用のComponent
  • 使う側のテンプレート

index.html

<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を使うように書く。パッケージは使うものを任意で。

チャート用のテンプレート

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

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

チャート用のComponent

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

  }

}

大事なところは次。

外部ライブラリの利用

declare var google: any;

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

描画関数の登録

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

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

リサイズに対応

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

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

使う側のテンプレート

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

使うだけ。

ノート

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

参考

作成日 2016-10-26