Angular4 で Google Chart を使う手順

プロジェクトを作成する

ng new practice-google-chart && cd $_ 

index.html を修正

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script> 
    var googleLoaded = false;
</script>

src/app/component.ts を修正

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

declare var google: any;
declare var googleLoaded: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  template: `
    <div style="width:800px;height:400px;">
      <div #myChart></div>
    </div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  @ViewChild('myChart') myChart

  ngAfterViewInit() {
    if(!googleLoaded) {
      googleLoaded = true;
      google.charts.load('current', {'packages':['corechart']})
    }

    google.charts.setOnLoadCallback(drawChart);
    const elm = this.myChart.nativeElement;

    function drawChart() {
      var 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]
      ]);
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};
      var chart = new google.visualization.PieChart(elm)
      chart.draw(data, options);
    }
  }
}