Angular-googlecharts-configuration-syntax
提供:Dev Guides
角度付き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;
}
結果
結果を確認します。