Angular-googlecharts-quick-guide
Angular Google Charts-概要
*Google Charts* は、インタラクティブなチャート作成機能を追加してWebアプリケーションを強化することを目的とした、純粋なJavaScriptベースのチャート作成ライブラリです。 幅広いチャートをサポートしています。 チャートは、Chrome、Firefox、Safari、Internet Explorer(IE)などの標準ブラウザーでSVGを使用して描画されます。 レガシーIE 6では、VMLを使用してグラフィックを描画します。
*angular-google-charts* は、Angularアプリケーション内でエレガントで機能豊富なGoogle Chart視覚化を提供し、Angularコンポーネントとシームレスに使用できる、Google Chartのオープンソースの角度ベースのラッパーです。 Google Chartのすべての基本コンポーネントと、Angularアプリケーション内の適切な例を説明する章があります。
特徴
以下は、Google Chartライブラリの主な機能です。
- 互換性-すべての主要なブラウザと、AndroidやiOSなどのモバイルプラットフォームで動作します。
- マルチタッチのサポート-AndroidやiOSなどのタッチスクリーンベースのプラットフォームでマルチタッチをサポートします。 iPhone/iPadおよびAndroidベースのスマートフォン/タブレットに最適です。
- 無料-オープンソースであり、非営利目的で無料で使用できます。
- 軽量-loader.jsコアライブラリは、非常に軽量なライブラリです。
- シンプルな構成-jsonを使用してチャートのさまざまな構成を定義し、学習と使用が非常に簡単です。
- 動的-チャート生成後でもチャートを変更できます。
- 複数軸-x、y軸に制限されません。 チャート上の複数の軸をサポートします。
- 設定可能なツールチップ-ユーザーがチャート上の任意のポイントにカーソルを合わせるとツールチップが表示されます。 googlechartsは、ツールチップをプログラムで制御するためのツールチップの組み込みフォーマッターまたはコールバックフォーマッターを提供します。
- * DateTimeサポート*-日付時刻を特別に処理します。 日付に関する賢明なカテゴリに対して多数の組み込みコントロールを提供します。
- 印刷-Webページを使用してグラフを印刷します。
- 外部データ-サーバーからの動的なデータのロードをサポートします。 コールバック関数を使用してデータを制御します。
- テキストの回転-あらゆる方向のラベルの回転をサポートします。
サポートされているチャートタイプ
Google Chartsライブラリは、次の種類のグラフを提供します。
Sr.No. | Chart Type/Description |
---|---|
1 |
Line Charts 線/スプラインベースのチャートを描くために使用されます。 |
2 |
Area Charts エリアごとのチャートを描画するために使用されます。 |
3 |
Pie Charts 円グラフの描画に使用されます。 |
4 |
Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines 散布図の描画に使用されます。 |
5 |
Bubble Charts バブルベースのチャートを描画するために使用されます。 |
6 |
Dynamic Charts ユーザーがチャートを変更できる動的チャートを描画するために使用されます。 |
7 |
Combinations さまざまなチャートの組み合わせを描画するために使用されます。 |
8 |
3D Charts 立体チャートの描画に使用されます。 |
9 |
Angular Gauges 速度計タイプのチャートを描画するために使用されます。 |
10 |
Heat Maps ヒートマップの描画に使用されます。 |
11 |
Tree Maps ツリーマップの描画に使用されます。 |
次の章では、上記の各タイプのチャートを例とともに詳細に説明します。
ライセンス
Google Chartはオープンソースであり、無料で使用できます。 リンクをたどってください-https://developers.google.com/chart/terms#license [利用規約]。
Angular Google Charts-環境設定
このチュートリアルでは、Google ChartとAngular Frameworkで作業を開始するための開発環境を準備する方法について説明します。 この章では、Angular 6に必要な環境設定について説明します。 Angular 6をインストールするには、次のものが必要です-
- ノード番号
- Npm
- 角度CLI
- コードを書くためのIDE
Nodejsは8.11より大きく、npmは5.6より大きくなければなりません。
ノード番号
nodejsがシステムにインストールされているかどうかを確認するには、ターミナルで node -v と入力します。 これは、現在システムにインストールされているnodejsのバージョンを確認するのに役立ちます。
C:\>node -v
v8.11.3
何も印刷されない場合は、システムにnodejsをインストールします。 nodejsをインストールするには、nodejsのホームページhttps://nodejs.org/en/download/にアクセスし、OSに基づいてパッケージをインストールします。
OSに基づいて、必要なパッケージをインストールします。 nodejsがインストールされると、npmも一緒にインストールされます。 npmがインストールされているかどうかを確認するには、ターミナルでnpm -vと入力します。 npmのバージョンが表示されます。
C:\>npm -v
5.6.0
Angular 6のインストールは、angular CLIを使用して非常に簡単です。 コマンドのリファレンスを取得するには、angularのホームページhttps://cli.angular.io/にアクセスしてください。
*npm install -g @ angular/cli* と入力して、システムにangle cliをインストールします。
Angular CLIをインストールすると、ターミナルに上記のインストールが取得されます。 任意のIDE、つまりWebStorm、Atom、Visual Studio Codeなどを使用できます。
Google Charts Wrapperをインストールする
次のコマンドを実行して、作成したプロジェクトにGoogle Charts Wrapperモジュールをインストールします。
googleChartsApp> npm angular-google-charts
+ [email protected]
added 2 packages in 20.526s
app.module.tsファイルに次のエントリを追加します
import { GoogleChartsModule } from 'angular-google-charts';
imports: [
...
GoogleChartsModule
],
角度付き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;
}
結果
結果を確認します。
角度付きGoogleチャート-エリアチャート
エリアチャートは、エリアベースのチャートを描画するために使用されます。 このセクションでは、以下のタイプのエリアベースのチャートについて説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本面グラフ |
2 |
負の値を持つ面グラフ。 |
3 |
互いに積み上げられた領域を持つグラフ。 |
4 |
データに欠損点があるチャート。 |
Angular Google Charts-棒グラフ
棒グラフは、棒グラフを描くために使用されます。 このセクションでは、以下のタイプの棒グラフを説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的な棒グラフ |
2 |
グループ化された棒グラフ。 |
3 |
棒が積み上げられた棒グラフ。 |
4 |
負のスタックを持つ棒グラフ。 |
Angular Google Charts-バブルチャート
バブルチャートは、バブルベースのチャートを描画するために使用されます。 このセクションでは、次の種類のバブルベースのチャートについて説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なバブルチャート。 |
2 |
データラベル付きのバブルチャート。 |
Google Angular Charts-ローソク足チャート
ローソク足チャートは、値の差異に対する始値と終値を表示するために使用され、通常は株を表すために使用されます。 このセクションでは、次のタイプのローソク足ベースのチャートについて説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なローソク足チャート。 |
2 |
Candlestick with customized colors カスタマイズされたローソク足チャート。 |
Google Angular Charts-縦棒グラフ
コラムチャートは、コラムベースのチャートを描画するために使用されます。 このセクションでは、次の種類のコラムベースのチャートについて説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なコラムチャート |
2 |
グループ化された列グラフ。 |
3 |
列が互いに積み上げられた列グラフ。 |
4 |
負のスタックを持つ列グラフ。 |
Google Angular Charts-組み合わせチャート
組み合わせグラフは、各シリーズを、ライン、エリア、バー、ローソク足、および階段状エリアのリストから異なるマーカータイプとしてレンダリングするのに役立ちます。 シリーズにデフォルトのマーカータイプを割り当てるには、seriesTypeプロパティを使用します。 シリーズプロパティは、各シリーズのプロパティを個別に指定するために使用されます。 以下は、違いを示す縦棒グラフの例です。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、違いを示す縦棒グラフの例を見てみましょう。
構成
*ComboChart* クラスを使用して、組み合わせグラフを表示しました。
type='ComboChart';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Fruits distribution';
type = 'ComboChart';
data = [
["Apples", 3, 2, 2.5],
["Oranges",2, 3, 2.5],
["Pears", 1, 5, 3],
["Bananas", 3, 9, 6],
["Plums", 4, 2, 3]
];
columnNames = ['Fruits', 'Jane','Jone','Average'];
options = {
hAxis: {
title: 'Person'
},
vAxis:{
title: 'Fruits'
},
seriesType: 'bars',
series: {2: {type: 'line'}}
};
width = 550;
height = 400;
}
結果
結果を確認します。
Google Angular Charts-ヒストグラムチャート
ヒストグラムは、数値データをバケットにグループ化し、バケットをセグメント化された列として表示するグラフです。 これらは、値が範囲に入る頻度としてデータセットの分布を表すために使用されます。 Google Chartは、バケットの数を自動的に選択します。 すべてのバケットは幅が等しく、バケット内のデータポイントの数に比例した高さを持っています。 ヒストグラムは、他の点で縦棒グラフに似ています。 このセクションでは、次のタイプのヒストグラムベースのチャートについて説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なヒストグラムチャート。 |
2 |
ヒストグラムチャートのカスタマイズされた色。 |
3 |
ヒストグラムチャートのカスタマイズされたバケット。 |
4 |
複数のシリーズを持つヒストグラムチャート。 |
Angular Google Charts-折れ線グラフ
折れ線グラフは、折れ線グラフを描くために使用されます。 このセクションでは、次の種類の折れ線グラフを説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的な折れ線グラフ。 |
2 |
可視データポイントを含むグラフ。 |
3 |
背景色がカスタマイズされたグラフ。 |
4 |
線の色をカスタマイズしたグラフ。 |
5 |
Customizable axis and tick labels 軸と目盛りのラベルがカスタマイズされたグラフ。 |
6 |
選択時のデータポイントに十字線を示す折れ線グラフ。 |
7 |
線の色をカスタマイズしたグラフ。 |
8 |
滑らかな曲線のあるグラフ。 |
Angular Google Charts-マップチャート
Google Map Chartは、Google Maps APIを使用して地図を表示します。 データ値は、マーカーとしてマップ上に表示されます。 データ値は、座標(緯度と経度のペア)または実際のアドレスです。 マップはそれに応じて拡大縮小され、識別されたすべてのポイントが含まれるようになります。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なGoogleマップ。 |
2 |
緯度と経度を使用して指定された場所を持つマップ。 |
Angular Google Charts-組織図
以下は組織図の例です。
組織図は、組織の上位/下位の関係を表すために使用されるノードの階層のレンダリングに役立ちます。 たとえば、家系図は組織図の一種です。 link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、組織図の例を見てみましょう。
構成
組織図を表示するために OrgChart クラスを使用しました。
type='OrgChart';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '';
type = 'OrgChart';
data = [
[{v:'Mike', f:'Mike<div style="color:red; font-style:italic">President</div>'},
'', 'The President'],
[{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'},
'Mike', 'VP'],
['Alice', 'Mike', ''],
['Bob', 'Jim', 'Bob Sponge'],
['Carol', 'Bob', '']
];
columnNames = ["Name","Manager","Tooltip"];
options = {
allowHtml: true
};
width = 550;
height = 400;
}
結果
結果を確認します。
Google Angular Charts-円グラフ
円グラフは、円ベースのグラフを描くために使用されます。 このセクションでは、次のタイプの円グラフを説明します。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的な円グラフ。 |
2 |
ドーナツグラフ。 |
3 |
3D円グラフ。 |
4 |
Pie chart with exploded slices スライスを展開した円グラフ。 |
Google Angular Charts-Sankey Charts
サンキーチャートは視覚化ツールであり、1つの値セットから別の値セットへのフローを表すために使用されます。 接続されたオブジェクトはノードと呼ばれ、接続はリンクと呼ばれます。 Sankeysは、2つのドメインまたはステージのセットを介した複数のパス間の多対多のマッピングを表示するために使用されます。
Sr.No | Chart Type/Description |
---|---|
1 |
基本的なサンキーチャート。 |
2 |
マルチレベルサンキーチャート。 |
3 |
カスタマイズされたサンキーチャート。 |
Google Angular Charts-散布図
以下は散布図の例です。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、散布図の例を見てみましょう。
構成
*ScatterChart* クラスを使用して散布図を表示しました。
type = 'ScatterChart';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Age vs Weight';
type='ScatterChart';
data = [
[8,12],
[4, 5.5],
[11,14],
[4,5],
[3,3.5],
[6.5,7]
];
columnNames = ['Age', 'Weight'];
options = {
};
width = 550;
height = 400;
}
結果
結果を確認します。
Google Angular Charts-ステップチャート
ステップエリアチャートは、ステップベースのエリアチャートです。 次のタイプの階段状エリアチャートについて説明します。
シニア
チャートタイプ/説明
1
リンク:/angular_googlecharts/angular_googlecharts_stepped_basic [基本的なステップチャート]
基本的なステップエリアチャート。
2
リンク:/angular_googlecharts/angular_googlecharts_stepped_stacked [積み上げ階段状グラフ]
積み上げ階段グラフ。
Google Angular Charts-テーブルチャート
テーブルチャートは、ソートおよびページングできるテーブルのレンダリングに役立ちます。 表のセルは、書式文字列を使用するか、HTMLをセル値として直接挿入することで書式設定できます。 数値はデフォルトで右揃えです。ブール値は、チェックマークまたはクロスマークとして表示されます。 ユーザーは、キーボードまたはマウスを使用して単一の行を選択できます。 列ヘッダーはソートに使用できます。 スクロール中、ヘッダー行は固定されたままです。 テーブルは、ユーザーの操作に対応するイベントを発生させます。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、テーブルチャートの例を見てみましょう。
構成
*Table* クラスを使用してテーブルチャートを表示しました。
type = 'Table';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = "";
type = 'Table';
data = [
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
];
columnNames = ["Name", "Salary","Full Time Employee"];
options = {
alternatingRowStyle:true,
showRowNumber:true
};
width = 550;
height = 400;
}
結果
結果を確認します。
角度付きGoogleチャート-ツリーマップ
TreeMapはデータツリーを視覚的に表現したもので、各ノードには0個以上の子と1つの親(ルートを除く)があります。 各ノードは長方形として表示され、割り当てた値に応じてサイズと色を変更できます。 サイズと色は、グラフ内の他のすべてのノードに対して相対的に評価されます。 以下は、ツリーマップチャートの例です。
link:/angular_googlecharts/angular_googlecharts_configuration_syntax [Googleグラフの構成構文]の章で、グラフを描画するために使用される構成を既に確認しました。 次に、TreeMapチャートの例を見てみましょう。
構成
TreeMapグラフを表示するために TreeMap クラスを使用しました。
type = 'TreeMap';
例
*_app.component.ts_*
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.componentl',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = '';
type='TreeMap';
data = [
["Global",null,0,0],
["America","Global",0,0],
["Europe","Global",0,0],
["Asia","Global",0,0],
["Australia","Global",0,0],
["Africa","Global",0,0],
["USA","America",52,31],
["Mexico","America",24,12],
["Canada","America",16,-23],
["France","Europe",42,-11],
["Germany","Europe",31,-2],
["Sweden","Europe",22,-13],
["China","Asia",36,4],
["Japan","Asia",20,-12],
["India","Asia",40,63],
["Egypt","Africa",21,0],
["Congo","Africa",10,12],
["Zaire","Africa",8,10],
];
columnNames = ["Location", "Parent","Market trade volume (size)","Market increase/decrease (color)"];
options = {
minColor:"#ff7777",
midColor:'#ffff77',
maxColor:'#77ff77',
headerHeight:15,
showScale:true
};
width = 550;
height = 400;
}
結果
結果を確認します。