IgxCategoryChart – 縦棒のクリックでドリルダウン表示したい

Category Chart で縦棒（シリーズ）をクリックしたときに、その項目の内訳データへ切り替えてドリルダウン表示するには、seriesClick イベントを処理し、イベント引数の item から取得したクリック項目に応じて dataSource を切り替えます。

Category Chart の設定

Category Chart の chartType に Column を指定して縦棒チャートとして表示します。dataSource には signal（computed）をバインドし、seriesClick イベントにハンドラを設定します。

<igx-category-chart
    chartType="Column"
    [dataSource]="data()"
    [includedProperties]="includedProperties"
    [xAxisTitle]="xAxisTitle()"
    ...
    (seriesClick)="onSeriesClick($event.args)">
</igx-category-chart>

コンポーネント側では、選択中の地域を保持する selectedRegion を用意し、その値に応じて地域別の合計データか、選択した地域の製品カテゴリ別データを返す data を定義します。selectedRegion が変わると data が再計算され、チャートの表示が切り替わります。

export class SalesDrilldown {
    /** 選択中の地域。null のときは地域別（トップレベル）を表示 */
    protected readonly selectedRegion = signal<string | null>(null);

    // 地域ごとの売上合計（トップレベル用）
    private readonly regionTotals: ChartPoint[] = ...;

    protected readonly data = computed<ChartPoint[]>(() => {
        const region = this.selectedRegion();
        if (region === null) {
            return this.regionTotals;
        }
        return REGION_SALES.find((r) => r.region === region)?.products ?? [];
    });

    protected readonly includedProperties = ['label', 'value'];
}

seriesClick イベントの処理

seriesClick イベントは、チャートのシリーズ（縦棒）がクリックされたときに発生します。イベント引数 IgxDomainChartSeriesPointerEventArgs の item プロパティには、クリックされた縦棒に対応するデータ項目が格納されています。この項目の label（地域名）を selectedRegion に設定することで、その地域の内訳へドリルダウンします。

import { IgxDomainChartSeriesPointerEventArgs } from 'igniteui-angular-charts';

export class SalesDrilldown {
    ...
    protected onSeriesClick(args: IgxDomainChartSeriesPointerEventArgs): void {
        if (this.selectedRegion() !== null) {
            return;
        }
        const item = args.item as ChartPoint | null | undefined;
        if (item) {
            this.selectedRegion.set(item.label);
        }
    }
}

ドリルダウン後に元の地域別表示へ戻す（ドリルアップする）には、selectedRegion を null に戻します。

@if (selectedRegion()) {
    <button type="button" (click)="drillUp()">全地域</button>
}

protected drillUp(): void {
    this.selectedRegion.set(null);
}

実行結果

地域別売上の縦棒をクリックすると、その地域の製品カテゴリ別売上に切り替わります。「全地域」ボタンをクリックすると、地域別の表示に戻ります。

「北海道」の縦棒をクリックすると、チャートがドリルダウンされます。