ng2-chartsを使用してAngularでChart.jsを使用する方法
序章
Chart.js は人気のあるJavaScriptチャートライブラリであり、ng2-chartsはChart.jsをAngularに統合するためのAngular2+のラッパーです。
このチュートリアルでは、Chart.jsとng2-charts
を使用して、Angularアプリケーションでサンプルチャートを作成します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv14.13.1、npm
v6.14.8、angular
v10.1.6、chart.js
v2.9.4、およびng2-charts
v2.4.2で検証されました。 。
ステップ1—プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @angular/cli new angular-chartjs-example --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
- cd angular-chartjs-example
プロジェクトフォルダから、次のコマンドを実行してchart.js
をインストールします。
- npm install chart.js@2.9.4 ng2-charts@2.4.2
次に、コードエディターでangular.json
を開き、Chart.min.js
を含むように変更して、Angularアプリケーションにchart.js
を追加します。
{
// ...
"projects": {
"angular-chartjs-example": {
// ...
"architect": {
"build": {
// ...
"options": {
// ...
"scripts": [
"node_modules/chart.js/dist/Chart.min.js"
],
"allowedCommonJsDependencies": [
"chart.js"
]
},
// ...
},
}
}},
// ...
}
注: chart.js
をallowedCommonJsDependencies
に追加すると、「CommonJS or AMD dependencies can cause optimization bailouts.
」の警告が表示されなくなります。
次に、コードエディタでapp.module.ts
を開き、ChartsModule
をインポートするように変更します。
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
を開き、コンテンツを次のコード行に置き換えます。
<div style="width: 40%;">
<canvas
baseChart
>
</canvas>
</div>
次に、chartType
とlegend
を渡すようにキャンバスを変更します。
<div style="width: 40%;">
<canvas
...
[chartType]="'line'"
[legend]="true"
>
</canvas>
</div>
chartType
:チャートの基本タイプを設定します。 値は、pie
、doughnut
、bar
、line
、polarArea
、radar
、またはhorizontalBar
。legend
:凡例をチャートの上に表示するかどうかのブール値。
次に、datasets
を渡すようにキャンバスを変更します。
<div style="width: 40%;">
<canvas
...
[datasets]="chartData"
>
</canvas>
</div>
次に、コードエディタで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
を渡すようにキャンバスを変更します。
<div style="width: 40%;">
<canvas
...
[labels]="chartLabels"
>
</canvas>
</div>
次に、コードエディタでapp.component.ts
を再度開き、テンプレートで参照した配列を定義します。
// ...
export class AppComponent {
// ...
chartLabels = [
'January',
'February',
'March',
'April'
];
}
labels
:X軸のラベルの配列。
ここで、app.component.html
に再度アクセスし、options
を渡すようにキャンバスを変更します。
<div style="width: 40%;">
<canvas
...
[options]="chartOptions"
>
</canvas>
</div>
次に、コードエディタでapp.component.ts
を再度開き、テンプレートで参照したオブジェクトを定義します。
// ...
export class AppComponent {
// ...
chartOptions = {
responsive: true
};
}
options
:チャートのオプションを含むオブジェクト。 使用可能なオプションの詳細については、公式のChart.jsドキュメントを参照してください。
アプリケーションを再コンパイルします。
- npm start
Webブラウザ(通常はlocalhost:4200
)でアプリケーションにアクセスすると、Account A
、Account B
、およびAccount C
のデータがプロットされたグラフが表示されます。 April
、February
、March
、April
の月:
公式ドキュメントでカバーされているChart.jsで利用可能な追加のプロパティとオプションがあります。
ステップ3—chartClick
およびchartHover
の処理
chartClick
とchartHover
の2つのイベントが発行され、チャートを操作しているユーザーに反応する方法を提供します。 現在アクティブなポイントとラベルは、発行されたイベントのデータの一部として返されます。
これらをキャンバスに追加する例を作成しましょう。
app.component.html
を開き、chartHover
とchartClick
を追加します。
<div style="width: 40%;">
<canvas
...
(chartHover)="onChartHover(($event)"
(chartClick)="onChartClick(($event)"
>
</canvas>
</div>
app.component.ts
を開き、テンプレートから参照したカスタム関数を追加します。
// ...
export class AppComponent {
// ...
onChartHover = ($event: any) => {
window.console.log('onChartHover', $event);
};
onChartClick = ($event: any) => {
window.console.log('onChartClick', $event);
};
}
アプリケーションを再コンパイルした後、開発ツールにログインしているonChartHover
とonChartClick
を確認できます。
ステップ4—データセットを動的に更新する
Chart.jsを使用する際のハイライトの1つは、バックエンドまたはユーザー入力から受信したデータを動的に更新または応答する機能です。
4か月にわたってプロットされた3つのアカウント値を使用して前の例を構築し続け、5月の新しいデータポイントを追加してみましょう。
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
でカスタム関数を使用します。
<div style="width: 40%;">
...
<button (click)="newDataPoint([900, 50, 300], 'May')">
Add data point
</button>
</div>
アプリケーションを再コンパイルした後、May
の月を操作すると、Account A
、Account B
、Account C
の値がグラフにプロットされることがわかります。 データポイントの追加ボタン。
結論
このチュートリアルでは、Chart.jsとng2-charts
を使用して、Angularアプリケーションでサンプルチャートを作成しました。
これらのライブラリを組み合わせることで、最新かつ動的な方法でデータを表示することができます。
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。