IgcDataChart – 凡例クリックでシリーズの表示/非表示を切り替える

IgcDataChartでは、凡例（IgcLegend）のlegendItemMouseLeftButtonDownイベントを使用することで、クリックされた凡例アイテムに対応するシリーズの表示/非表示を切り替えることができます。

今回は、3 つのシリーズを持つ棒チャートを例に、凡例クリック時にシリーズの表示/非表示を切り替える方法を紹介します。

凡例クリックでシリーズの表示/非表示を切り替える

下記のようにigc-column-series要素のname属性と一致する文字列を返すe.series.nameを使って、document.querySelector()でシリーズ要素を取得できます。
取得した要素のvisibilityプロパティにVisibility.Collapsed（非表示）またはVisibility.Visible（表示）を設定することで、シリーズの表示状態を切り替えます。

// 凡例アイテムがマウス左ボタンでクリックされたときのイベントハンドラを設定
legend.legendItemMouseLeftButtonDown = (
  s: IgcLegendBaseComponent,
  e: IgcLegendMouseButtonEventArgs
) => {
  // e.series.name でクリックされたシリーズの name 属性を取得
  const name = e.series.name;

  // name 属性を使って HTML 上の igc-column-series 要素を取得
  const seriesElement = document.querySelector(
    `igc-column-series[name="${name}"]`
  ) as IgcColumnSeriesComponent;

  if (!seriesElement) return;

  // 現在の表示状態を確認して、表示/非表示をトグル
  seriesElement.visibility =
    seriesElement.visibility === Visibility.Visible
      ? Visibility.Collapsed  // 表示中 → 非表示
      : Visibility.Visible;   // 非表示 → 表示
};

実行結果

凡例アイテムをクリックするたびに対応するシリーズの表示/非表示が切り替わります。

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

API

• IgcDataChartComponent
• IgcLegendComponent
• legendItemMouseLeftButtonDown