角で美しいチャートをつくる方法

データの可視化では、チャートデータを表現する重要な役割を果たしている.あなたが角度枠組みのために見事なチャートを探しているならばEssential JS 2 chart コンポーネントは、さまざまな印象的な機能を提供します.
このブログでは、我々は、角度のアプリケーションで簡単なグラフを作成し、基本的な機能を構成する過程を歩くつもりです.完全なコードはGitHub repository .

開発環境の設定

あなたは角度でグラフを作成する前に開発環境を設定する必要があります.ソースはGitHub そして、パッケージはNPMで利用可能です、あなたはいくつかの簡単なステップでチャートで始められることができます.

角度アプリケーションの作成

角度アプリケーションを作成するには、Angular CLI グローバルに以下のコマンドを使用します.

npm install -g @angular-cli

次に、次のコマンドを使用して新しい角度アプリケーションを作成します.

ng new my-app

このコマンドは必要なファイルを全てダウンロードし、NPMのインストールを初期化します.

グラフコンポーネントのインストール

角アプリケーションが作成されたあと、次のコマンドを使用して、Chartパッケージをインストールします.

cd my-app

npm install @syncfusion/ej2-ng-charts –save

saveフラグは、パッケージ内の依存関係としてチャートパッケージを保存します.JSONファイル.

チャートの設定

環境設定に関連するすべての設定が完了しました.グラフを構成する前に、グラフを描画するコンポーネントが必要です.角成分を作成するには、次の角CLIコマンドを使用します.

ng generate component chart

次に、アプリでグラフモジュールをインポートします.モジュールです.tsファイル.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { ChartComponent } from './chart/chart.component';
import { ChartModule } from '@syncfusion/ej2-ng-charts’; 

@NgModule ({
 declarations: [AppComponent,ChartComponent],
 imports: [BrowserModule, ChartModule],
 bootstrap: [AppComponent]
})
export class AppModule { }

グラフコンポーネントの作成

グラフに関連するすべての設定が完了しました.今、チャートの最初のチャートを定義する必要があります.コンポーネント.HTMLファイル.

<ejs-chart></ejs-chart>

次に、グラフのコンポーネントをアプリケーションに追加します.コンポーネント.HTMLファイル.

<app-chart></app-chart>

申請

アプリケーションディレクトリに移動し、次のコマンドを使用してサーバーを起動します.

ng serve -open

すべてのファイルが正常にコンパイルされたら、基本図は次の図のようになります.

モジュールの注入

今、我々はデータなしで基本的なチャートを持っています.いくつかのデータを提供する前に、syncfusionがサポートするグラフタイプについてもっと学びましょう.
SyncFusion Chartコンポーネントは、25以上のグラフ型をプロットできます.各タイプはモジュール化され、別のサービスとして利用可能ですので、あなたのアプリケーションを軽量に保つために必要なモジュールだけを使用することができます.たとえば、列グラフを使用してデータを視覚化する場合は、アプリケーションのプロバイダーでColumnSeriesServiceを定義します.モジュールです.tsファイル.このサービスは、列グラフ機能へのアクセスを提供します.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService } from '@syncfusion/ej2-ng-charts';

@NgModule({
  imports: [ BrowserModule, ChartModule ],
  providers: [CategoryService, ColumnSeriesService ]
 })

ColumnServiceServiceがプロバイダーに注入されたあと、列型を列として設定し、Javascriptオブジェクトを受け入れるDataSourceプロパティを使用してデータをグラフに格納します.

import {Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-chart',
    template:`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis">
              <e-series-collection>
              <e-series [dataSource]="chartData" type="Column" xName="year" yName="gold"
              name="Gold"> 
              </e-series>              
              </e-series-collection>
              </ejs-chart>`
})

export class AppComponent implements OnInit {
    public chartData: Object [];
    public primaryXAxis: Object; 
    ngOnInit(): void {
        // Data for chart series
        this.chartData = [
            { year:'2000', gold: 35, silver: 25 }, { year: '2001', gold: 28, silver: 20 },
            { year:'2002', gold: 34, silver: 21 }, { year: '2003', gold: 32, silver: 15 },
            { year:'2004', gold: 40, silver: 30 } 
         ];  
         this.primaryXAxis = { valueType: 'Category' };
    }

}

設定された列グラフは次のようになります.

他のグラフタイプの構築

他のデカルトチャートタイプの実装は、カラムチャートの実装と非常に似ています.あなたが地域か線チャートを望むならば、ちょっとプロバイダーに対応するサービスを注入して、シリーズタイプを変えてください.
列グラフに別のシリーズを追加することによって、ラインチャートタイプでデータの他のセットを視覚化しましょう.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService} from '@syncfusion/ej2-ng-charts';

@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService]
})

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis">

 <e-series [dataSource]="chartData" type="Column" xName="year" yName="gold" name="Gold">
 <e-series [dataSource]="chartData" type="Line" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

タイトル

グラフは、グラフで何を探すためにユーザーに通知するタイトルを与えることができます.タイトルのテキストは、タイトルプロパティを使用してカスタマイズできます.

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [title]="title">

        <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold">
        <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object;
    ngOnInit(): void {
        this.primaryXAxis = { valueType: 'Category'  };
        this.title = 'Olympic Medal Count';
    }
}

伝説

エンドユーザーがグラフコンポーネントと対話できる別の方法は凡例です.あなたは、プロバイダーでLegendServiceを注入することによって凡例機能にアクセスすることができます.また、LegendSettingsのVisibleプロパティをtrueに設定する必要があります.
それぞれのシリーズの種類は、凡例で表示される独自の凡例のアイコンを持っており、そのシリーズのために指定された名前がその横に表示されます.次のコード例では、凡例アイコンをシリーズのLegendShapeプロパティを使用して四角形と円に変更します.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, LegendService } from '@syncfusion/ej2-ng-charts';
@NgModule({
    imports: [ BrowserModule, ChartModule ],
    providers: [CategoryService, ColumnSeriesService, LineSeriesService, LegendService]
   })

<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">

     <e-series [dataSource]="chartData" type="Column" legendShape="Rectangle" xName="year" yName="gold" name="Gold">
     <e-series [dataSource]="chartData" type="Line" legendShape="Circle" xName="year" yName="silver" name="Silver">

  </ejs-chart>`

 export class AppComponent implements OnInit {  
    public title: Object;    
    public primaryXAxis: Object;
    public legendSettings: Object;
    ngOnInit(): void {  
       this.primaryXAxis = { valueType: 'Category' };      
       this.legendSettings = {visible : true};
  }
}

凡例を有効にした後、次の図に示すようにグラフが表示されます.

データラベル

データラベルは、あなたのデータの読みやすさを改善したい状況のために設計されます.DataLabelServiceをプロバイダーに注入し、データラベルの可視プロパティを有効にすることで、データラベル機能にアクセスできます.
データラベルの位置を変更することもできます.次のコード例では、位置プロパティを使用して、バー内の列グラフのデータラベルを移動しています.

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, LegendService, DataLabelService  } from '@syncfusion/ej2-ng-charts';

@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService, LegendService, DataLabelService ]
 })

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings">

      <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
      <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver" [marker]="lineMarker">

    </ejs-chart>`

   export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object;
    public legendSettings: Object;
    public lineMarker : Object;
    public columnMarker : Object;
    ngOnInit(): void {       
        this.primaryXAxis = { valueType: 'Category' };      
        this.legendSettings = {visible : true};      
        this.columnMarker = { dataLabel : { visible :true, position: 'Top'}};
        this.lineMarker = { visible : true, dataLabel : { visible :true }};
    }
}

データラベルを有効にした後、我々のチャートは次のように表示されます.

ツールチップ

また、ツールチップを使用してそれらを指すときにグラフデータポイントについての詳細情報を提供することができます.ツールヒント機能を使用するには、「ツール」サービスをプロバイダーに注入し、Enabledプロパティをtrueに設定してツールヒントを有効にします

import { ChartModule } from '@syncfusion/ej2-ng-charts';
import { CategoryService, ColumnSeriesService, LineSeriesService, DataLabelService, LegendService, TooltipService  } from '@syncfusion/ej2-ng-charts';
@NgModule({
imports: [ BrowserModule, ChartModule ],
providers: [CategoryService, ColumnSeriesService, LineSeriesService, DataLabelService, LegendService, TooltipService ]
 })  

`<ejs-chart id="chart-container" [primaryXAxis]="primaryXAxis" [legendSettings]="legendSettings" [tooltip]="tooltip">

     <e-series [dataSource]="chartData" type="Column" legendShape="Circle" xName="year" yName="gold" name="Gold" [marker]="columnMarker">
     <e-series [dataSource]="chartData" type="Line" legendShape="Triangle" xName="year" yName="silver" name="Silver" [marker]="lineMarker">

 </ejs-chart>`

export class AppComponent implements OnInit {
    public title: Object;
    public primaryXAxis: Object; 
    public legendSettings: Object;
    public lineMarker : Object;
    public columnMarker : Object;
    public tooltip : Object;
    ngOnInit(): void {
        this.primaryXAxis = { valueType: 'Category'  };
        this.legendSettings = {visible : true};
        this.columnMarker = { dataLabel : { visible :true, position: 'Top'}};
        this.lineMarker = { dataLabel : { visible :true }};
        this.tooltip = {enable : true};
    }
}

結論

このブログでは、シンプルなチャートを作成し、その基本的な機能を強化する方法を学びました.チャートコンポーネントは、さまざまなアダプター、ズーム、選択、トラックボール、十字線、金融チャート、極とレーダーチャート、円グラフ、注釈、軸タイプ、ストリップライン、および大いに多くのデータバインディングなど、他の多くの高度な機能を提供しています.
私たちはあなた自身でチャートコンポーネントをチェックアウトすることをお勧めしますsource on GitHub , インタラクティブsample browser , とdocumentation すべての機能とAPIを探索する.また、必ずチェックアウトしてくださいchart sample on GitHub , どのように簡単にグラフを作成し、構成することを確認するには、すぐに実行可能です.
チャートが他のフレームワークで利用可能であることを望んでいるか.君は運がいい.現在入手可能ですASP.NET Core , ASP.NET MVC , JavaScript , and React , すぐにVueのためにも利用できるようになります.
何か質問やコメントがある場合は、下記のコメントでお知らせください.また、我々を介してお問い合わせすることができますsupport forum or Direct-Trac . 私たちはあなたを支援して満足している!
郵便Create Beautiful Charts in Angular 最初に現れたSyncfusion Blogs .