Angular Pie Chartによるデータビジュアライゼーション

本記事では、Angularアプリケーションにおけるピーチャートの実装方法について詳しく解説します。ApexChartsを使用した具体的な例を通じて、データを視覚的に表現し、ユーザーにとって理解しやすいインターフェースを提供する方法を学びます。

Angularでのピーチャートの作成手順

Angular環境でApexChartsライブラリを利用してピーチャートを作成する手順について、セットアップから実装、カスタマイズ方法に至るまで詳しく説明します。具体的なコード例やビジュアルを交え、開発者が容易に実装できるようサポートします。

セットアップ

まず最初に、AngularプロジェクトにApexChartsライブラリをインストールする必要があります。次のコマンドを使用して、プロジェクトにApexChartsとAngularのラッパーを追加します。

npm install apexcharts ng-apexcharts --save

コンポーネントの作成

次に、新しいコンポーネントを作成し、ApexChartsをインポートします。以下は、ピーチャートを表示する基本的なコンポーネントの例です。

import { Component } from '@angular/core';
import { ChartOptions } from 'ng-apexcharts';

@Component({
  selector: 'app-pie-chart',
  template: `

`
})
export class PieChartComponent {
  chartOptions: ChartOptions = {
    series: [44, 55, 13, 43, 22],
    chart: {
      width: 380,
      type: 'pie',
    },
    labels: ['Apple', 'Mango', 'Orange', 'Banana', 'Grapes'],
  };
}

カスタマイズ

また、ピーチャートのデザインや動作をカスタマイズすることも可能です。以下の表に、いくつかのカスタマイズオプションを示します。

Angular 円グラフの概要

円グラフは、データセットにおける各カテゴリ（部分）が全体（合計）に占める割合を視覚的に表現するために使用されます。例えば、企業の年間売上における各製品カテゴリの売上割合、家計における各費目支出の割合などを分かりやすく表示することができます。

円グラフの特徴としては、以下が挙げられます。

• 円形のチャートとして表示：データ全体を円として表現し、各カテゴリはその円の一部を占める扇形として表示されます。
• 扇形の面積はデータ値に比例：各カテゴリのデータ値が大きいほど、対応する扇形の面積も大きくなります。これにより、データの比率を視覚的に把握しやすくなります。
• 全体に対する割合を直感的に理解できる：円全体が100%を表し、各扇形の面積がその割合を示すため、全体に対する各カテゴリの割合を直感的に理解することができます。

Angular 円グラフの例

以下は、IgxPieChartComponent を使用して円グラフを作成し、データバインディングを行う例です。この例では、架空の会社の部門別の予算支出の割合を示しています。

TypeScript

import { Component } from '@angular/core';

@Component({
  selector: 'app-pie-chart',
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.css']
})
export class PieChartComponent {
  public data = [
    { Department: "営業部", Budget: 60 },
    { Department: "マーケティング部", Budget: 30 },
    { Department: "研究開発部", Budget: 10 }
  ];
}

HTML

<igx-pie-chart [dataSource]="data"
               width="500px"
               height="500px"
               labelMemberPath="Department"
               valueMemberPath="Budget">
</igx-pie-chart>

説明:

• dataSource プロパティに、部門名と予算額を持つデータ配列をバインドしています。
• labelMemberPath プロパティには、扇形に表示するラベルとして使用するデータのプロパティ名 "Department" を指定しています。
• valueMemberPath プロパティには、扇形の面積を決定するデータのプロパティ名 "Budget" を指定しています。

このコードを実行すると、円グラフが表示され、各部門の予算額の割合が扇形の面積として表現されます。各扇形には、対応する部門名が表示されます。

Angular 円グラフの推奨事項

1 適用场景

円グラフは、以下の様な場合に特に有効です。

• データセットが小規模な場合: データ項目数が少ない場合 (一般的には6～8個以下) には、円グラフは各項目の割合を明確に示すことができます。データ項目数が多くなると、扇形が細かくなりすぎて見づらくなってしまうため、他のチャートタイプを検討する必要があります。
• 部分と全体の関係を示したい場合: 各部分が全体に占める割合を強調したい場合に、円グラフは非常に効果的です。例えば、市場シェア、アンケート結果における各回答の割合など、部分と全体の関係を示す必要があるデータに適しています。

2 部分と全体の関係を示す他のチャートタイプ

円グラフ以外にも、部分と全体の関係を示すチャートタイプはいくつか存在します。データの特性や表現したい内容に合わせて、適切なチャートタイプを選択することが重要です。

• 円環図: 円グラフと似ていますが、中心部分が空洞になっているため、複数のデータ系列を比較したり、中心部分に情報を追加したりするのに適しています。
• ファンネル図: 各段階におけるデータの減少を漏斗状に表現するチャートで、例えば、顧客獲得プロセスにおける各段階のコンバージョン率などを示すのに適しています。
• 積み上げ面グラフ/100% 積み上げ面グラフ: 複数のデータ系列を積み重ねて表示するチャートで、各系列の全体に対する割合の変化を時間軸に沿って示すのに適しています。
• 積み上げ棒グラフ/100% 積み上げ棒グラフ: 積み上げ面グラフと似ていますが、棒グラフで表現するため、カテゴリ間の比較をより明確に示すことができます。
• ツリーマップ: データを階層構造で表現し、各項目を矩形で表示するチャートで、階層構造を持つデータの全体像と各項目の割合を同時に把握するのに適しています。
• ウォーターフォールチャート: 各項目の増減を積み重ねて表示することで、最終的な値にどのように到達したのかを示すチャートで、例えば、売上高の増減要因分析などに利用されます。

3 対話機能

Angular の円グラフコンポーネントは、ユーザーインタラクションを向上させるための様々な機能を提供しています。

• 凡例: 各扇形に対応するカテゴリ名と色を表示し、ユーザーが特定のカテゴリの表示/非表示を切り替えられるようにします。
• 扇形の分割: 特定の扇形をクリックまたはホバーすることで、その扇形を円グラフから分離して表示することができます。これにより、特定のカテゴリを強調したり、詳細な情報を見やすくすることができます。
• 扇形の選択: 特定の扇形をクリックすることで、その扇形を選択状態にすることができます。選択された扇形は、色やスタイルを変更することで強調表示されます。
• チャートアニメーション: データの読み込み時や更新時に、円グラフをアニメーション表示することで、ユーザーの注意を引きつけ、データの変化を分かりやすくすることができます。

4 ベストプラクティス

円グラフを作成する際には、以下のベストプラクティスを参考にすると、より効果的で理解しやすいチャートを作成することができます。

• 扇形または線分を使用して、値またはパーセンテージを比較する: 円グラフは、主に割合の比較を目的としたチャートであるため、値の絶対的な大きさを比較するのには適していません。値の比較を行う場合は、棒グラフなどを検討する必要があります。
• カテゴリがどのように小さな部分に細分化されているかを示す: 円グラフは、階層構造を持たないデータに適しています。階層構造を持つデータを表現する場合は、ツリーマップなどを検討する必要があります。
• 小規模な非階層データセット（6〜8個未満の扇形）を表示する: 扇形が多すぎると、チャートが見づらくなってしまいます。データ項目数が6～8個を超える場合は、他のチャートタイプを検討するか、データをグループ化することを検討する必要があります。
• データの合計は100％にする: 円グラフは、全体に対する割合を示すチャートであるため、データの合計が100%になるようにする必要があります。
• データを大きい順に並べる: 扇形を大きい順に並べることで、チャートが見やすくなります。
• 標準的な表示方法を採用する：12時位置から時計回りに配置する: 一般的に、円グラフは12時位置から時計回りに扇形を配置します。この標準的な表示方法に従うことで、ユーザーがチャートを理解しやすくなります。
• 区別しやすい色板を使用する: 各扇形を区別しやすいように、異なる色を使用する必要があります。色覚異常者にも配慮した色使いを心がけましょう。
• 可読性を高めるために、データラベルの配置を検討する: データラベルは、各扇形のカテゴリ名や値などを表示するものです。データラベルの配置を工夫することで、チャートの可読性を向上させることができます。
• 棒グラフや円環図など、より明確なチャートタイプを選択する: 円グラフよりも、棒グラフや円環図の方がデータの比較を明確に示せる場合があります。データの特性に合わせて、適切なチャートタイプを選択しましょう。
• 比較分析のために複数の円グラフを並べて配置することは避ける: 複数の円グラフを並べて配置すると、チャート間の比較が難しくなってしまいます。複数のデータを比較する場合は、積み上げ棒グラフなど、他のチャートタイプを検討する必要があります。

5 不向きな场景

円グラフは、以下の様な場合に不向きです。

• データの経時変化を比較する場合: データの経時変化を比較する場合は、折れ線グラフや棒グラフの方が適しています。
• 正確なデータ比較が必要な場合: 円グラフは、主に割合の比較を目的としたチャートであるため、正確なデータ比較を行うのには適していません。正確なデータ比較を行う場合は、表や棒グラフなどを検討する必要があります。
• データ量が多い場合（6〜8個を超える扇形）: 扇形が多すぎると、チャートが見づらくなってしまいます。データ項目数が6～8個を超える場合は、他のチャートタイプを検討するか、データをグループ化することを検討する必要があります。

Angular 円グラフの凡例

凡例は、円グラフの各扇形がどのカテゴリを表しているのかを示すための重要な要素です。Angular の円グラフコンポーネントでは、凡例を柔軟にカスタマイズすることができます。

1 凡例的作用

凡例は、円グラフの解釈を助ける以下の様な役割を果たします。

• 各データポイントの情報の表示: 凡例には、各扇形に対応するカテゴリ名、色、値、割合などの情報が表示されます。
• 全体に対する割合の表示: 凡例を見ることで、各カテゴリが全体に占める割合を簡単に把握することができます。
• データポイントの表示/非表示の切り替え: 凡例をクリックすることで、対応する扇形の表示/非表示を切り替えることができます。これにより、特定のカテゴリに焦点を当てたり、データの比較を容易にすることができます。

2 凡例の対話機能

Angular の円グラフコンポーネントでは、凡例をクリックすることで、対応する扇形の表示/非表示を切り替えることができます。

例えば、"営業部" の凡例をクリックすると、"営業部" に対応する扇形が非表示になります。再度クリックすると、扇形が表示されます。

3 凡例の設定方法

Angular の円グラフコンポーネントでは、ItemLegend オブジェクトを使用して凡例を設定します。

1. ItemLegend オブジェクトの作成

ItemLegend オブジェクトを作成し、labelMemberPath プロパティに、凡例に表示するラベルとして使用するデータのプロパティ名 (例えば、"Department") を指定します。

public legend = new ItemLegend({ labelMemberPath: 'Department' });

2. IgxPieChartComponent への設定

IgxPieChartComponent の legend プロパティに、作成した ItemLegend オブジェクトを設定します。

<igx-pie-chart [dataSource]="data"
               [legend]="legend">
</igx-pie-chart>
<igx-legend #legend></igx-legend>

3. 凡例の外観のカスタマイズ (オプション)

legendItemTemplate および legendItemBadgeTemplate プロパティを使用して、凡例項目の外観をカスタマイズすることができます。

例:

TypeScript

import { Component } from '@angular/core';
import { ItemLegend } from 'igniteui-angular-charts';

@Component({
  // ...
})
export class PieChartComponent {
  public data = [
    { Department: "営業部", Budget: 60 },
    { Department: "マーケティング部", Budget: 30 },
    { Department: "研究開発部", Budget: 10 }
  ];

  public legend = new ItemLegend({ 
    labelMemberPath: 'Department',
    legendItemTemplate: this.itemTemplate,
    legendItemBadgeTemplate: this.badgeTemplate 
  });

  public itemTemplate = (item) => {
    return `<div>
              <span style="color: ${item.brush}">●</span>
              <span>${item.label}: ${item.value}</span>
            </div>`;
  };

  public badgeTemplate = (item) => {
    return `<span style="background-color: ${item.brush}; width: 10px; height: 10px; display: inline-block;"></span>`;
  };
}

この例では、legendItemTemplate を使用して、凡例項目にカテゴリ名と値を表示するようにカスタマイズしています。また、legendItemBadgeTemplate を使用して、凡例項目に色付きの四角を表示するようにカスタマイズしています。

Angular 円グラフのその他の分類項目

円グラフでは、値の小さい複数のデータポイントをまとめて "その他" カテゴリとして表示することができます。これにより、チャートが見やすくなり、重要なデータポイントに焦点を当てることができます。

1 "その他" カテゴリの用途

"その他" カテゴリは、以下の様な場合に役立ちます。

• データポイント数が多く、チャートが見づらい場合: データポイント数が多すぎると、扇形が細かくなりすぎて見づらくなってしまいます。"その他" カテゴリを使用することで、チャートを見やすくすることができます。
• 値の小さいデータポイントが多数存在する場合: 値の小さいデータポイントが多数存在する場合、それらをまとめて "その他" カテゴリとして表示することで、重要なデータポイントに焦点を当てることができます。

2 othersCategoryThreshold と othersCategoryType プロパティ

"その他" カテゴリのしきい値は、othersCategoryThreshold および othersCategoryType プロパティを使用して設定します。

• othersCategoryThreshold: しきい値を設定します。この値より小さいデータポイントは "その他" カテゴリに分類されます。
• othersCategoryType: しきい値のタイプを指定します。
  • Number: othersCategoryThreshold の値を数値として解釈します。
  • Percent: othersCategoryThreshold の値をパーセンテージとして解釈します。例えば、othersCategoryThreshold を 5 に設定し、othersCategoryType を Percent に設定すると、全体の 5% 未満のデータポイントは "その他" カテゴリに分類されます。

3 "その他" カテゴリの設定例

<igx-pie-chart [dataSource]="data"
               othersCategoryThreshold="5"
               othersCategoryType="Percent">
</igx-pie-chart>

この例では、全体の 5% 未満のデータポイントを "その他" カテゴリとして表示するように設定しています。

Angular 円グラフの展開

Angular の円グラフコンポーネントでは、個々の扇形を選択して展開することができます。これにより、特定のデータポイントを強調したり、詳細な情報を見やすくすることができます。

1 展開機能

• 扇形の選択と展開: 特定の扇形をクリックすることで、その扇形を選択状態にし、円グラフから分離して表示することができます。
• SliceClick イベント: 扇形がクリックされたときに発生する SliceClick イベントを使用して、カスタムロジックを実装することができます。例えば、クリックされた扇形に対応する詳細情報を表示するなど、ユーザーインタラクションに応じた処理を実装することができます。

2 展開機能の使用例

TypeScript

import { Component } from '@angular/core';
import { IgxPieSliceClickEventArgs } from 'igniteui-angular-charts';

@Component({
  // ...
})
export class PieChartComponent {
  // ...

  public onSliceClick(args: IgxPieSliceClickEventArgs) {
    console.log("クリックされた扇形:", args.slice);
    // クリックされた扇形に対応する詳細情報を表示するなどの処理を実装
  }
}

HTML

<igx-pie-chart [dataSource]="data"
               (sliceClick)="onSliceClick($event)">
</igx-pie-chart>

この例では、扇形がクリックされたときに onSliceClick メソッドが実行され、クリックされた扇形の情報がコンソールに出力されます。

Angular 円グラフの選択

Angular の円グラフコンポーネントでは、ユーザーが扇形を選択できるようにすることができます。これにより、ユーザーが特定のデータポイントに焦点を当てたり、データの比較を容易にすることができます。

1 選択機能

デフォルトでは、円グラフの扇形をクリックすることで、その扇形を選択状態にすることができます。選択された扇形は、色やスタイルを変更することで強調表示されます。

2 selectedItems プロパティ

selectedItems プロパティを使用することで、現在選択されている扇形を取得することができます。

public selectedSlices = this.pieChart.selectedItems;

3 selectionMode プロパティ

selectionMode プロパティを使用して、選択モードを設定することができます。

• Single: 一度に1つの扇形のみを選択できます。 (デフォルト)
• Multiple: 複数の扇形を同時に選択できます。
• Manual: 選択機能を無効にします。

4 選択イベント

円グラフの選択に関するイベントは以下の4つです。

• SelectedItemChanging: 扇形の選択状態が変更される直前に発生します。
• SelectedItemChanged: 扇形の選択状態が変更された後に発生します。
• SelectedItemsChanging: 複数の扇形の選択状態が変更される直前に発生します。
• SelectedItemsChanged: 複数の扇形の選択状態が変更された後に発生します。

5 "Changing" イベント

"Changing" イベント ( SelectedItemChanging および SelectedItemsChanging ) は、キャンセル可能です。イベントハンドラ内で eventArgs.cancel = true; とすることで、扇形の選択状態の変更をキャンセルすることができます。

6 IgxPieSliceOthersContext オブジェクト

IgxPieSliceOthersContext オブジェクトは、"その他" 扇形が選択された場合に、その扇形に含まれるデータ項目のリストを提供します。

7 選択機能の使用例

TypeScript

import { Component } from '@angular/core';
import { IgxPieSliceClickEventArgs } from 'igniteui-angular-charts';

@Component({
  // ...
})
export class PieChartComponent {
  // ...

  public onSelectedItemChanged(args) {
    console.log("選択された扇形:", args.newSelection);
  }
}

HTML

<igx-pie-chart [dataSource]="data"
               selectionMode="Multiple"
               (selectedItemChanged)="onSelectedItemChanged($event)">
</igx-pie-chart>

この例では、扇形が選択されたときに onSelectedItemChanged メソッドが実行され、選択された扇形の情報がコンソールに出力されます。

Angular 円グラフのアニメーション

Angular の円グラフコンポーネントでは、アニメーション効果を使用して、データの読み込み時や更新時に円グラフを動的に表示することができます。これにより、ユーザーの注意を引きつけ、データの変化を分かりやすくすることができます。

1 アニメーションの作成方法

radiusFactor および startAngle プロパティを使用してアニメーション効果を作成することができます。

• radiusFactor: チャートの半径をスケールします。0 から 1 の値を指定します。0 は半径が 0 になり、1 は元の半径になります。
• startAngle: チャートを回転させます。0 から 360 の値を指定します。

2 アニメーションの使用例

TypeScript

import { Component } from '@angular/core';

@Component({
  // ...
})
export class PieChartComponent {
  // ...

  public animateChart() {
    this.pieChart.radiusFactor = 0;
    this.pieChart.startAngle = 0;

    setTimeout(() => {
      this.pieChart.radiusFactor = 1;
      this.pieChart.startAngle = 360;
    }, 1000);
  }
}

HTML

<igx-pie-chart #pieChart [dataSource]="data">
</igx-pie-chart>
<button (click)="animateChart()">アニメーション開始</button>

この例では、ボタンをクリックすると animateChart メソッドが実行され、円グラフの半径が 0 から 1 に変化し、同時にチャートが 360 度回転するアニメーションが表示されます。

Angular 円グラフのスタイル設定

Angular の円グラフコンポーネントでは、CSS を使用してチャートの外観をカスタマイズすることができます。例えば、扇形の色、ラベルのフォント、凡例のスタイルなどを変更することができます。

1 スタイル設定の方法

CSS を使用してスタイルを設定する場合は、igx-pie-chart クラスをセレクタとして使用します。

2 スタイル設定の例

/* 扇形の色を変更 */
.igx-pie-chart .igx-pie-slice:nth-child(1) {
  fill: red;
}

.igx-pie-chart .igx-pie-slice:nth-child(2) {
  fill: blue;
}

/* ラベルのフォントを変更 */
.igx-pie-chart .igx-pie-slice-label {
  font-family: sans-serif;
  font-size: 12px;
}

/* 凡例のスタイルを変更 */
.igx-legend .igx-legend-item {
  margin-bottom: 5px;
}

この例では、1番目の扇形の色を赤、2番目の扇形の色を青に変更しています。また、ラベルのフォントを sans-serif、12px に変更し、凡例項目の下マージンを 5px に設定しています。

Angular ラジアル円グラフ

ラジアル円グラフは、円の中心からデータポイントの位置まで伸びる円形の扇形を使用してデータを表現するチャートです。円グラフと似ていますが、データポイントが円周上に配置されるのではなく、円の中心から放射状に配置される点が異なります。

1 ラジアル円グラフの特徴

• データポイントが円の中心から放射状に配置される: 円グラフではデータポイントが円周上に配置されますが、ラジアル円グラフでは円の中心から放射状に配置されます。
• データポイントの値が扇形の半径で表現される: 円グラフではデータポイントの値が扇形の面積で表現されますが、ラジアル円グラフでは扇形の半径で表現されます。
• 複数のデータ系列を比較しやすい: 複数のデータ系列を異なる色で表示することで、データ系列間の比較を容易にすることができます。

2 ラジアル円グラフの作成例

TypeScript

import { Component } from '@angular/core';

@Component({
  // ...
})
export class RadialPieChartComponent {
  public data = [
    { Country: "日本", Sales: 100 },
    { Country: "アメリカ", Sales: 200 },
    { Country: "中国", Sales: 300 }
  ];
}

HTML

<igx-radial-pie-chart [dataSource]="data"
                      radius="150"
                      labelMemberPath="Country"
                      valueMemberPath="Sales">
</igx-radial-pie-chart>

この例では、IgxRadialPieChartComponent を使用してラジアル円グラフを作成しています。radius プロパティでチャートの半径を指定し、labelMemberPath プロパティと valueMemberPath プロパティでラベルと値に使用するデータのプロパティ名を指定しています。

その他のリソース

• 円環図: Ignite UI for Angular 円環図
• 極座標図: Ignite UI for Angular 極座標図
• ラジアル図: Ignite UI for Angular ラジアル図
• API リファレンス: Ignite UI for Angular API リファレンス

API リファレンス

• legendItemBadgeTemplate: 凡例項目のバッジのテンプレートを指定します。
• legendItemTemplate: 凡例項目のテンプレートを指定します。
• legendLabelMemberPath: 凡例に表示するラベルとして使用するデータのプロパティ名を指定します。
• othersCategoryThreshold: "その他" カテゴリのしきい値を指定します。
• othersCategoryType: "その他" カテゴリのしきい値のタイプを指定します。
• selectionMode: 扇形の選択モードを指定します。

まとめ

ApexChartsを使用したAngularでのピーチャートの実装は非常にシンプルで、視覚的なデータ表現を通じてユーザーに価値を提供できます。開発者は、必要に応じてさまざまなカスタマイズを行うことで、独自のニーズを満たすチャートを作成できます。

関連文献

興味のある方は、以下の文献を参考にしてください：

• ApexChartsの公式ドキュメント
• Angular公式ドキュメント

Q&A

Q1: AngularにApexChartsを追加するにはどうすればよいですか？

A1: コマンドラインで「npm install apexcharts ng-apexcharts --save」を実行することでApexChartsを追加できます。

Q2: ピーチャートのデータはどのように設定しますか？

A2: コンポーネント内の`chartOptions`オブジェクトの`series`プロパティにデータの配列を設定します。

Q3: ピーチャートの色を変更するにはどうすればよいですか？

A3: `colors`プロパティを使用して、チャートの各セグメントの色をカスタマイズできます。