開始行: * キーワード [#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.... <script type="text/javascript"> google.charts.load('current', {'packages':['corechart... </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(docume... 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 Cha... - [[Quick Start | Charts | Google... 終了行: * キーワード [#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.... <script type="text/javascript"> google.charts.load('current', {'packages':['corechart... </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(docume... 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 Cha... - [[Quick Start | Charts | Google... ページ名: