IgbDataChart の積層グラフ(IgbStackedColumnSeries)で、マウスホバーしたデータ項目の値が null(または 0)である系列をツールチップの表示対象から動的に除外する方法を、IgbDataToolTipLayerExcludedSeries プロパティと SeriesMouseEnter イベントを使って解説します。

既定の状態では、IgbDataToolTipLayer を配置しただけではホバーした系列の値が null または 0 の項目も含めてすべての系列がツールチップに表示されます。

IgbDataChart の設定

積層シリーズ(IgbStackedColumnSeries と複数の IgbStackedFragmentSeries)に加えて、ツールチップの表示制御を行う IgbDataToolTipLayer を配置し、IncludedSeries / ExcludedSeries をフィールドにバインドします。系列にホバーしたタイミングで判定を行うため、SeriesMouseEnter イベントハンドラも指定します。

<IgbDataChart @ref="Chart"
              Width="600px"
              Height="600px"
              SeriesMouseEnter="OnSeriesMouseEnter">

    <IgbCategoryXAxis Name="xAxis" DataSource="_data" Label="@(nameof(DataItem.Year))">
    </IgbCategoryXAxis>

    <IgbNumericYAxis Name="yAxis">
    </IgbNumericYAxis>

    <IgbStackedColumnSeries Name="Series1" DataSource="_data" XAxisName="xAxis" YAxisName="yAxis">
        @if (fragmentData != null)
        {
            @for (int i = 0; i < fragmentData.Count; i++)
            {
                <IgbStackedFragmentSeries Title="@fragmentData[i].Title" ValueMemberPath="@fragmentData[i].ValueMemberPath" />
            }
        }
    </IgbStackedColumnSeries>

    <IgbDataToolTipLayer Name="dataToolTipLayer" IncludedSeries="includedSeries" ExcludedSeries="exclusedSeries" SummaryType="DataLegendSummaryType.None">
    </IgbDataToolTipLayer>

</IgbDataChart>

ExcludedSeries の使用

SeriesMouseEnter ハンドラでは、ホバーされたデータ項目(DataItem)から、各フラグメントに対応するプロパティ(int? 型)の値をリフレクションで取得します。値が null、または 0 の場合はその系列名を除外対象として抽出し、exclusedSeriesExcludedSeries にバインド済み)へ配列として設定します。これにより、値が無い系列だけがツールチップから動的に消えます。

private void OnSeriesMouseEnter(IgbChartMouseEventArgs args)
{
    exclusedSeries = [];

    if (args.Item is not DataItem item)
    {
        return;
    }

    exclusedSeries = fragmentData
        .Where(fragment =>
        {
            var value = typeof(DataItem)
                .GetProperty(fragment.ValueMemberPath!)?
                .GetValue(item);

            return value is null || Convert.ToDouble(value) == 0;
        })
        .Select(fragment => fragment.Title!)
        .ToArray();
}

実行結果

積層カラムのいずれかの系列にマウスをホバーすると、ツールチップにはその項目で値が存在する系列のみが表示され、値が null または 0 の系列は自動的に除外されます。

Tagged:

製品について

Ignite UI for Blazor