角度付きGoogleチャート-構成構文

この章では、AngularのGoogle Chart APIを使用してグラフを描画するために必要な構成を紹介します。

ステップ1-角度アプリケーションを作成する

次の手順に従って、_Angular 6-Project Setup_章で作成したAngularアプリケーションを更新します-

Step	Description
1	Create a project with a name googleChartsApp as explained in the Angular 6 - Project Setup chapter.
2	Modify app.module.ts, app.component.ts and app.componentl as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

変更されたモジュール記述子 app.module.ts の内容は次のとおりです。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GoogleChartsModule } from 'angular-google-charts';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,GoogleChartsModule
   ],
   providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

以下は、変更されたHTMLホストファイル app.componentl の内容です。

<google-chart #chart
   [title]="title"
   [type]="type"
   [data]="data"
   [columnNames]="columnNames"
   [options]="options"
   [width]="width"
   [height]="height">
</google-chart>

構成を理解した後、最後に更新されたapp.component.tsが表示されます。

ステップ2-構成の使用

タイトルを設定

title = 'Browser market shares at a specific website, 2014';

チャートタイプの設定

type='PieChart';

data

チャートに表示されるデータを構成します。

data = [
   ['Firefox', 45.0],
   ['IE', 26.8],
   ['Chrome', 12.8],
   ['Safari', 8.5],
   ['Opera', 6.2],
   ['Others', 0.7]
];

列名

表示する列名を構成します。

columnNames = ['Browser', 'Percentage'];

オプション

他のオプションを設定します。

options = {
   colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'], is3D: true
};

例

構成構文をさらに理解するには、次の例を検討してください-

*_app.component.ts_*

import { Component } from '@angular/core';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'Browser market shares at a specific website, 2014';
   type = 'PieChart';
   data = [
      ['Firefox', 45.0],
      ['IE', 26.8],
      ['Chrome', 12.8],
      ['Safari', 8.5],
      ['Opera', 6.2],
      ['Others', 0.7]
   ];
   columnNames = ['Browser', 'Percentage'];
   options = {
   };
   width = 550;
   height = 400;
}

結果

結果を確認します。

基本的な円グラフ

Angular-googlecharts-configuration-syntax