5最高のGoogleチャートの角度で使用する

記事はもともと私のブログに公開されています
グラフは、図のようなGoogleのアプリケーションの中で使用する様々な無料のグラフを提供しています.彼らはデータを使用して図をプロットする強力なツールを使用して簡単です.この記事では、いくつかのGoogleチャートの角度アプリケーションで使用する方法について説明します.
5 Best Google Charts For Angular
グーグルチャート
角度Google Chartは、Googleチャートプロジェクトのラッパーです.NPMを使用してインストールすることで角度アプリケーションで使用できるパッケージです.

5最高のGoogleチャートの角度で使用する

ラインチャート−データ系列

の形で情報を表示するグラフ

円グラフ-情報は、

を示すために部品に分けられた円チャートです

ヒストグラムチャート-それは本質的に中央カットアウト

の面積と円グラフです

ゲージチャートも、ダイヤルチャートと呼ばれて、情報

を示す針を使用する

コンボチャート-情報をプロットする2つ以上の行または列の組み合わせ
角度のアプリケーションで各グラフを実装してみましょう.

Googleチャートをインストール
最初のことは、様々なグラフをプロットすることができるように角度チャートアプリケーションでGoogleチャートライブラリをインストールすることです.
注意:この例では角12を使用しています.
以下のコマンドを実行して、角のGoogleチャートパッケージをインストールします.

npm install angular-google-charts

グーグルモジュールをインポートします
次のことはGoogleChartsModuleファイルでapp.module.tsモジュールをインポートすることです.

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}

サービスファイルの作成app.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";

@Injectable()
export class AppService {
    constructor(private httpClient: HttpClient) {
    }

    getChartData(): Observable<Array<Array<string | number>>> {
        return this.httpClient.get<Array<Array<string | number>>>(`http://localhost:3000/chartData`);
    }
}

私は偽のJSON APIを作成するJSONサーバーを使用しています.
ファイル242479142

{
    "chartData": [
        [
            "London",
            8136000
        ],
        [
            "New York",
            8538000
        ],
        [
            "Paris",
            2244000
        ],
        [
            "Berlin",
            3470000
        ],
        [
            "Kairo",
            19500000
        ]
    ]
}

コマンドを使用してJSONサーバをインストールして実行します.

npm install -g json-server

json-server --watch db.json

今すぐチャートをプロットする準備が整いました.チャートを一つずつプロットしましょう.

ラインチャート
ページのチャートをプロットする時間です.私は偽のJSON APIを消費している(プロットするあなたの本当のAPIを使用することができます).

import { Component, OnInit } from '@angular/core';
import { ChartType } from "angular-google-charts";
import { AppService } from './app.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'google-charts';
  myType = ChartType.LineChart;
  chartData: Array<Array<string | number>> = [];

  constructor(private appService: AppService) {
  }

  ngOnInit() {
    this.getChartData();
  }

  private getChartData() {
    this.appService.getChartData().subscribe(data => {
      this.chartData = data;
    })
  }
}

テンプレートコードの追加
テンプレートファイルに以下のコードを追加します.ここからdb.json値を見つけてください:

<google-chart [title]="'Some Title'" [type]="myType" [data]="chartData">
</google-chart>

ファイルを保存し、開いているブラウザを実行します.あなたは、ページの次のチャートに気づくでしょう.
Chart Types

円グラフ
コンポーネントのTypeをTypeに変えてください

myType = ChartType.PieChart;

ヒストグラムチャートChartType.PieChartまでchartTypeに変更

myType = ChartType.Histogram;

ゲージチャートHistorgramまでchartTypeに変更

myType = ChartType.Gauge;

コンボチャートGaugeまでchartTypeに変更

myType = ChartType.ComboChart;

注:コンボと線図は似ています.唯一の違いは、コンボチャートは、複数のグラフを持つことができます.今、私はコンボで1つだけのグラフを使用している.複数のデータの配列を渡すことができます.

Googleチャートを使用している間の一般的なエラーComboChart
このエラーの解決策は-任意の文字列のグラフタイプを提供しないでください.256569142 enumから値を取得し、[ type ]に渡します.

// import the Enum
import { ChartType } from "angular-google-charts";

// get chart type
myType = ChartType.LineChart;

テンプレートでType '' is not assignable to type 'ChartType'.変数を渡します.
記事はもともと私のブログに公開されています

結論
様々なGoogleチャートを角度アプリケーションで統合する方法について説明します.あなたの角度アプリケーションを最適化したいならば、私はこの記事をチェックすることを勧めます
また、
5 Best Google Charts For Angular

5 Best Ways To Optimize Angular For Scaling
Real World Examples of 5 Common Observable Operators