円グラフコンポーネントIgcDataPieChartでは、凡例（IgcItemLegend）のlegendItemMouseLeftButtonDownイベントを使用することで、クリックされた凡例アイテムに対応するデータを取得できます。
今回は、エネルギー需要データを表示する円グラフを例に、凡例クリック時にデータを取得する方法を紹介します。
凡例クリックでデータを取得する
IgcDataPieChartは、値が小さいスライスを自動的に Others としてまとめる機能を持っています。
そのため、クリックされた凡例アイテムには通常のスライスと Others の 2 種類があります。
// 凡例アイテムがマウス左ボタンでクリックされたときのイベントハンドラを設定
legend.legendItemMouseLeftButtonDown = (
s: IgcLegendBaseComponent,
e: IgcLegendMouseButtonEventArgs
) => {
const item = e.item;
// Others スライスの場合 item.items に集約されたデータの配列が入っている
// 通常スライスの場合 item.items は存在しないので undefined になる
const items = item.items as typeof data | undefined;
if (!items) {
// 通常スライスをクリックした場合
// item はデータオブジェクトそのものなのでプロパティに直接アクセスできる
const energyType = item.EnergyType;
const energyDemand = item.EnergyDemand;
console.log(`クリックされたアイテム: ${energyType} (${energyDemand})`);
} else {
// Others スライスをクリックした場合
// items 配列をループして、まとめられた各データを取り出す
items.forEach((i) => {
console.log(`クリックされた Others アイテム: ${i.EnergyType} (${i.EnergyDemand})`);
});
}
};
実行結果
上記コードを実行すると、次のように各スライスの情報を取得できます。
Oil をクリックすると
クリックされたアイテム: Oil (30.2)
Others をクリックすると
クリックされた Others アイテム: Solar (4.3) クリックされた Others アイテム: Wind (3.5) クリックされた Others アイテム: Biofuel (1.5)
ダウンロード後、以下のコマンドで実行できます。
npm ci npm run dev
