Angular-googlecharts-quick-guide

提供：Dev Guides
移動先:案内、検索

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/にアクセスしてください。

Angular CLI 

*npm install -g @ angular/cli* と入力して、システムにangle cliをインストールします。

Angular CLIのインストール

Angular CLIをインストールすると、ターミナルに上記のインストールが取得されます。 任意のIDE、つまりWebStorm、Atom、Visual Studio Codeなどを使用できます。

Google Charts Wrapperをインストールする

次のコマンドを実行して、作成したプロジェクトにGoogle Charts Wrapperモジュールをインストールします。 

googleChartsApp> npm angular-google-charts

+ angular-google-charts@0.1.0
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

Basic Area

基本面グラフ

2

Area with negative values

負の値を持つ面グラフ。

3

Stacked area

互いに積み上げられた領域を持つグラフ。

4

Area with missing points

データに欠損点があるチャート。

Angular Google Charts-棒グラフ

棒グラフは、棒グラフを描くために使用されます。 このセクションでは、以下のタイプの棒グラフを説明します。

Sr.No Chart Type/Description
1

Basic Bar

基本的な棒グラフ

2

Grouped Bar Chart

グループ化された棒グラフ。

3

Stacked Bar

棒が積み上げられた棒グラフ。

4

Negative Bar

負のスタックを持つ棒グラフ。

Angular Google Charts-バブルチャート

バブルチャートは、バブルベースのチャートを描画するために使用されます。 このセクションでは、次の種類のバブルベースのチャートについて説明します。

Sr.No Chart Type/Description
1

Basic Bubble

基本的なバブルチャート。

2

Bubble chart with data labels

データラベル付きのバブルチャート。

Google Angular Charts-ローソク足チャート

ローソク足チャートは、値の差異に対する始値と終値を表示するために使用され、通常は株を表すために使用されます。 このセクションでは、次のタイプのローソク足ベースのチャートについて説明します。

Sr.No Chart Type/Description
1

Basic Candlestick

基本的なローソク足チャート。

2

Candlestick with customized colors

カスタマイズされたローソク足チャート。

Google Angular Charts-縦棒グラフ

コラムチャートは、コラムベースのチャートを描画するために使用されます。 このセクションでは、次の種類のコラムベースのチャートについて説明します。

Sr.No Chart Type/Description
1

Basic Column

基本的なコラムチャート

2

Grouped Column Chart

グループ化された列グラフ。

3

Stacked Column

列が互いに積み上げられた列グラフ。

4

Negative Stacked Column

負のスタックを持つ列グラフ。

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

Basic Histogram

基本的なヒストグラムチャート。

2

Controlling Color

ヒストグラムチャートのカスタマイズされた色。

3

Controlling Buckets

ヒストグラムチャートのカスタマイズされたバケット。

4

Multiple Series

複数のシリーズを持つヒストグラムチャート。

Angular Google Charts-折れ線グラフ

折れ線グラフは、折れ線グラフを描くために使用されます。 このセクションでは、次の種類の折れ線グラフを説明します。

Sr.No Chart Type/Description
1

Basic line

基本的な折れ線グラフ。

2

With visible points

可視データポイントを含むグラフ。

3

Customizable background color

背景色がカスタマイズされたグラフ。

4

Customizable line color

線の色をカスタマイズしたグラフ。

5

Customizable axis and tick labels

軸と目盛りのラベルがカスタマイズされたグラフ。

6

Crosshairs

選択時のデータポイントに十字線を示す折れ線グラフ。

7

Customizable line style

線の色をカスタマイズしたグラフ。

8

Line Charts with curved lines

滑らかな曲線のあるグラフ。

Angular Google Charts-マップチャート

Google Map Chartは、Google Maps APIを使用して地図を表示します。 データ値は、マーカーとしてマップ上に表示されます。 データ値は、座標（緯度と経度のペア）または実際のアドレスです。 マップはそれに応じて拡大縮小され、識別されたすべてのポイントが含まれるようになります。

Sr.No Chart Type/Description
1

Basic Map

基本的なGoogleマップ。

2

Map using Latitude/Longitude

緯度と経度を使用して指定された場所を持つマップ。

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

Basic Pie

基本的な円グラフ。

2

Donut Chart

ドーナツグラフ。

3

3D Pie chart

3D円グラフ。

4

Pie chart with exploded slices

スライスを展開した円グラフ。

Google Angular Charts-Sankey Charts

サンキーチャートは視覚化ツールであり、1つの値セットから別の値セットへのフローを表すために使用されます。 接続されたオブジェクトはノードと呼ばれ、接続はリンクと呼ばれます。 Sankeysは、2つのドメインまたはステージのセットを介した複数のパス間の多対多のマッピングを表示するために使用されます。

Sr.No Chart Type/Description
1

Basic Sankey Chart

基本的なサンキーチャート。

2

Multilevel Sankey Chart

マルチレベルサンキーチャート。

3

Customizing Sankey Chart

カスタマイズされたサンキーチャート。

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;
}

結果

結果を確認します。

TreeMap Chart

「https://www.finddevguides.com/index.php?title=Angular-googlecharts-quick-guide&oldid=78652」から取得
Powered by MediaWiki