序章

Chart.js は人気のあるJavaScriptチャートライブラリであり、ng2-chartsはChart.jsをAngularに統合するためのAngular2+のラッパーです。

このチュートリアルでは、Chart.jsとng2-chartsを使用して、Angularアプリケーションでサンプルチャートを作成します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、ノードv14.13.1、npm v6.14.8、angular v10.1.6、chart.js v2.9.4、およびng2-chartsv2.4.2で検証されました。 。

ステップ1—プロジェクトの設定

@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。

ターミナルウィンドウで、次のコマンドを使用します。

  1. npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests

これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。

新しく作成されたプロジェクトディレクトリに移動します。

  1. cd angular-chartjs-example

プロジェクトフォルダから、次のコマンドを実行してchart.jsをインストールします。

  1. npm install chart.js@2.9.4 ng2-charts@2.4.2

次に、コードエディターでangular.jsonを開き、Chart.min.jsを含むように変更して、Angularアプリケーションにchart.jsを追加します。

angle.json
{
  // ...
  "projects": {
    "angular-chartjs-example": {
      // ...
      "architect": {
        "build": {
          // ...
          "options": {
            // ...
            "scripts": [
              "node_modules/chart.js/dist/Chart.min.js"
            ],
            "allowedCommonJsDependencies": [
              "chart.js"
            ]
          },
          // ...
        },
      }
    }},
  // ...
}

注: chart.jsallowedCommonJsDependenciesに追加すると、「CommonJS or AMD dependencies can cause optimization bailouts.」の警告が表示されなくなります。

次に、コードエディタでapp.module.tsを開き、ChartsModuleをインポートするように変更します。

src / app / app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

import { AppComponent } from './app.component';

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

このスキャフォールディングを設定すると、チャートコンポーネントの作業を開始できます。

ステップ2—チャートコンポーネントの作成

4か月の間に、3つの異なるアカウントに関連付けられた値をプロットするための入力として渡すためのオプションのいくつかを使用する例から始めましょう。

ng2-chartsは、HTMLcanvas要素に適用できるbaseChartディレクティブを提供します。

コードエディタでapp.component.htmlを開き、コンテンツを次のコード行に置き換えます。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    baseChart
  >
  </canvas>
</div>

次に、chartTypelegendを渡すようにキャンバスを変更します。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    ...
    [chartType]="'line'"
    [legend]="true"
  >
  </canvas>
</div>
  • chartType:チャートの基本タイプを設定します。 値は、piedoughnutbarlinepolarArearadar、またはhorizontalBar
  • legend:凡例をチャートの上に表示するかどうかのブール値。

次に、datasetsを渡すようにキャンバスを変更します。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    ...
    [datasets]="chartData"
  >
  </canvas>
</div>

次に、コードエディタでapp.component.tsを開き、テンプレートで参照した配列を定義します。

src / app / app.component.ts
// ...
export class AppComponent {
  // ...

  chartData = [
    {
      data: [330, 600, 260, 700],
      label: 'Account A'
    },
    {
      data: [120, 455, 100, 340],
      label: 'Account B'
    },
    {
      data: [45, 67, 800, 500],
      label: 'Account C'
    }
  ];
}
  • datasets:これは、データ配列と各データセットのラベルを含むオブジェクトの配列である必要があります。
  • data:または、グラフが単純でデータセットが1つしかない場合は、datasetsの代わりにdataを使用して、データポイントの配列を渡すことができます。

ここで、app.component.htmlに再度アクセスし、labelsを渡すようにキャンバスを変更します。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    ...
    [labels]="chartLabels"
  >
  </canvas>
</div>

次に、コードエディタでapp.component.tsを再度開き、テンプレートで参照した配列を定義します。

src / app / app.component.ts
// ...
export class AppComponent {
  // ...

  chartLabels = [
    'January',
    'February',
    'March',
    'April'
  ];
}
  • labels:X軸のラベルの配列。

ここで、app.component.htmlに再度アクセスし、optionsを渡すようにキャンバスを変更します。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    ...
    [options]="chartOptions"
  >
  </canvas>
</div>

次に、コードエディタでapp.component.tsを再度開き、テンプレートで参照したオブジェクトを定義します。

src / app / app.component.ts
// ...
export class AppComponent {
  // ...

  chartOptions = {
    responsive: true
  };
}
  • options:チャートのオプションを含むオブジェクト。 使用可能なオプションの詳細については、公式のChart.jsドキュメントを参照してください。

アプリケーションを再コンパイルします。

  1. npm start

Webブラウザ(通常はlocalhost:4200)でアプリケーションにアクセスすると、Account AAccount B、およびAccount Cのデータがプロットされたグラフが表示されます。 AprilFebruaryMarchAprilの月:

Example chart with ng2-chart

公式ドキュメントでカバーされているChart.jsで利用可能な追加のプロパティとオプションがあります。

ステップ3—chartClickおよびchartHoverの処理

chartClickchartHoverの2つのイベントが発行され、チャートを操作しているユーザーに反応する方法を提供します。 現在アクティブなポイントとラベルは、発行されたイベントのデータの一部として返されます。

これらをキャンバスに追加する例を作成しましょう。

app.component.htmlを開き、chartHoverchartClickを追加します。

src / app / app.component.html
<div style="width: 40%;">
  <canvas
    ...
    (chartHover)="onChartHover(($event)"
    (chartClick)="onChartClick(($event)"
  >
  </canvas>
</div>

app.component.tsを開き、テンプレートから参照したカスタム関数を追加します。

src / app / app.component.ts
// ...
export class AppComponent {
  // ...

  onChartHover = ($event: any) => {
    window.console.log('onChartHover', $event);
  };

  onChartClick = ($event: any) => {
    window.console.log('onChartClick', $event);
  };
}

アプリケーションを再コンパイルした後、開発ツールにログインしているonChartHoveronChartClickを確認できます。

ステップ4—データセットを動的に更新する

Chart.jsを使用する際のハイライトの1つは、バックエンドまたはユーザー入力から受信したデータを動的に更新または応答する機能です。

4か月にわたってプロットされた3つのアカウント値を使用して前の例を構築し続け、5月の新しいデータポイントを追加してみましょう。

app.component.tsを開き、カスタム関数を定義します。

src / app / app.component.ts
// ...
export class AppComponent {
  // ...

  newDataPoint(dataArr = [100, 100, 100], label) {
    this.chartData.forEach((dataset, index) => {
      this.chartData[index] = Object.assign({}, this.chartData[index], {
        data: [...this.chartData[index].data, dataArr[index]]
      });
    });

    this.chartLabels = [...this.chartLabels, label];
  }
}

newDataPoint()に配列が渡されない場合、[100, 100, 100]がデフォルト値として提供されます。

データセット配列で実行されているミューテーションもありません。 Object.assign は、以前のデータと新しいデータを含む新しいオブジェクトを返すために使用されます。

次に、app.component.htmlを開き、canvasの後のbuttonでカスタム関数を使用します。

src / app / app.component.html
<div style="width: 40%;">
  ...

  <button (click)="newDataPoint([900, 50, 300], 'May')">
    Add data point
  </button>
</div>

アプリケーションを再コンパイルした後、Mayの月を操作すると、Account AAccount BAccount Cの値がグラフにプロットされることがわかります。 データポイントの追加ボタン。

結論

このチュートリアルでは、Chart.jsとng2-chartsを使用して、Angularアプリケーションでサンプルチャートを作成しました。

これらのライブラリを組み合わせることで、最新かつ動的な方法でデータを表示することができます。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。