Blazor チャートの選択

Blazor {ComponentTitle} の Ignite UI for Blazor 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。これにより、提示されたデータをユーザーがより意味のある方法で操作するさまざまな可能性が提供されます。

Blazor WebAssembly および Blazor Server 向けに最適化された 60 以上の高性能チャートを使用 とグラフを使用して、生データを魅力的な視覚化に変換し、最高の UX を実現します。

無料で試してみる

選択の設定

デフォルトの動作 SelectionMode はオフになっており、次のいずれかのオプションを選択する必要があります。{ComponentName} に使用可能な選択モードがいくつかあります。

• Auto
• None
• Brighten
• FadeOthers
• GrayscaleOthers
• FocusColorThickOutline
• FocusColorOutline
• SelectionColorThickOutline
• SelectionColorOutline
• FocusColorFill
• SelectionColorFill
• ThickOutline

Brighten は選択した項目をフェードアウトしますが、FadeOthers は反対の効果を引き起こします。 GrayscaleOthers は FadeOthers と同様に動作しますが、シリーズの残りの部分にはグレー色を表示します。これは SelectionBrush 設定をオーバーライドすることに注意してください。 SelectionColorOutline と SelectionColorThickOutline はシリーズの周囲に境界線を描画します。

併せて、どの項目を選択するかをより細かく制御できる SelectionBehavior も利用できます。Auto のデフォルトの動作は PerSeriesAndDataItemMultiSelect です。

• Auto
• PerDataItemMultiSelect
• PerDataItemSingleSelect
• PerSeriesAndDataItemMultiSelect
• PerSeriesAndDataItemSingleSelect
• PerSeriesAndDataItemGlobalSingleSelect
• PerSeriesMultiSelect
• PerSeriesSingleSelect

Color Fill (塗りつぶし) による選択の設定

次の例は、SelectionColorFill と Auto の両方の選択動作の組み合わせ、つまり PerSeriesAndDataItemMultiSelect を示しています。塗りつぶしは、シリーズ項目全体の背景色を変更するため、便利な視覚的な合図を提供します。各項目をクリックすると、項目が緑から紫に変わります。

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbCategoryChartModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
public class TemperatureAverageDataItem
{
    public string Month { get; set; }
    public double Temperature { get; set; }
}

public class TemperatureAverageData
    : List<TemperatureAverageDataItem>
{
    public TemperatureAverageData()
    {
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Jan",
            Temperature = 3
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Feb",
            Temperature = 4
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Mar",
            Temperature = 9
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Apr",
            Temperature = 15
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"May",
            Temperature = 21
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Jun",
            Temperature = 26
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Jul",
            Temperature = 29
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Aug",
            Temperature = 28
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Sep",
            Temperature = 24
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Oct",
            Temperature = 18
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Nov",
            Temperature = 11
        });
        this.Add(new TemperatureAverageDataItem()
        {
            Month = @"Dec",
            Temperature = 5
        });
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Average Temperature Range in New York
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        DataSource="TemperatureAverageData"
        YAxisTitle="Temperature in Degrees Celsius"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        ToolTipType="ToolTipType.None"
        SelectionMode="SeriesSelectionMode.SelectionColorFill"
        SelectionBehavior="SeriesSelectionBehavior.Auto"
        SelectionBrush="purple"
        FocusBrush="purple">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var chart = this.chart;

    }

    private IgbCategoryChart chart;

    private TemperatureAverageData _temperatureAverageData = null;
    public TemperatureAverageData TemperatureAverageData
    {
        get
        {
            if (_temperatureAverageData == null)
            {
                _temperatureAverageData = new TemperatureAverageData();
            }
            return _temperatureAverageData;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

複数選択の構成

その他の選択モードでは、さまざまな選択方法が提供されます。たとえば、PerDataItemMultiSelect とともに SelectionBehavior を使用すると、複数のシリーズが存在する場合にカテゴリ全体のすべてのシリーズに影響し、カテゴリ間での選択が可能になります。PerDataItemSingleSelect と比較すると、一度に選択できるのは 1 つのカテゴリの項目のみです。これは、複数のシリーズが異なるデータ ソースにバインドされている場合に役立ち、カテゴリ間の選択をより細かく制御できます。 PerSeriesAndDataItemGlobalSingleSelect を使用すると、一度にすべてのカテゴリで単一のシリーズを選択できます。

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class EnergyRenewableConsumptionItem
{
    public string Location { get; set; }
    public double Year { get; set; }
    public double Hydro { get; set; }
    public double Solar { get; set; }
    public double Wind { get; set; }
    public double Other { get; set; }
}

public class EnergyRenewableConsumption
    : List<EnergyRenewableConsumptionItem>
{
    public EnergyRenewableConsumption()
    {
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"China",
            Year = 2019,
            Hydro = 1269.5,
            Solar = 223,
            Wind = 405.2,
            Other = 102.8
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Europe",
            Year = 2019,
            Hydro = 632.54,
            Solar = 154,
            Wind = 461.3,
            Other = 220.3
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"USA",
            Year = 2019,
            Hydro = 271.16,
            Solar = 108,
            Wind = 303.4,
            Other = 78.34
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Brazil",
            Year = 2019,
            Hydro = 399.3,
            Solar = 5.5,
            Wind = 55.83,
            Other = 56.25
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Canada",
            Year = 2019,
            Hydro = 381.98,
            Solar = 4.3,
            Wind = 34.17,
            Other = 10.81
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options vertical">
        <IgbPropertyEditorPanel
        Name="PropertyEditor"
        @ref="propertyEditor"

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="SelectionMode"
            Name="SelectionModeEditor"
            @ref="selectionModeEditor"
            Label="Selection Mode: "
            PrimitiveValue="@("SelectionColorFill")">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="SelectionBehavior"
            Name="SelectionBehaviorEditor"
            @ref="selectionBehaviorEditor"
            Label="Selection Behavior: "
            PrimitiveValue="@("PerSeriesAndDataItemGlobalSingleSelect")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        ChartType="CategoryChartType.Column"
        DataSource="EnergyRenewableConsumption"
        YAxisTitleLeftMargin="10"
        YAxisTitleRightMargin="5"
        YAxisLabelLeftMargin="0"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        SelectionMode="SeriesSelectionMode.SelectionColorFill"
        SelectionBehavior="SeriesSelectionBehavior.PerSeriesAndDataItemGlobalSingleSelect"
        SelectionBrush="orange"
        FocusBrush="orange">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var propertyEditor = this.propertyEditor;
        var selectionModeEditor = this.selectionModeEditor;
        var selectionBehaviorEditor = this.selectionBehaviorEditor;
        var chart = this.chart;

        this.BindElements = () => {
            propertyEditor.Target = this.chart;
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditor;
    private IgbPropertyEditorPropertyDescription selectionModeEditor;
    private IgbPropertyEditorPropertyDescription selectionBehaviorEditor;
    private IgbCategoryChart chart;

    private EnergyRenewableConsumption _energyRenewableConsumption = null;
    public EnergyRenewableConsumption EnergyRenewableConsumption
    {
        get
        {
            if (_energyRenewableConsumption == null)
            {
                _energyRenewableConsumption = new EnergyRenewableConsumption();
            }
            return _energyRenewableConsumption;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

アウトライン選択の構成

FocusBrush を適用すると、SelectionMode プロパティがフォーカス オプションの 1 つに設定されている場合に、選択されたシリーズが境界線付きで表示されます。

ラジアル シリーズの選択

この例では、各ラジアル シリーズを異なる色で選択できる IgbDataChart を介した別のシリーズ タイプを示します。

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class FootballPlayerStatsItem
{
    public string Attribute { get; set; }
    public double Ronaldo { get; set; }
    public double Messi { get; set; }
}

public class FootballPlayerStats
    : List<FootballPlayerStatsItem>
{
    public FootballPlayerStats()
    {
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Dribbling",
            Ronaldo = 8,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Passing",
            Ronaldo = 8,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Finishing",
            Ronaldo = 10,
            Messi = 10
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Free Kicks",
            Ronaldo = 8,
            Messi = 9
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Penalties",
            Ronaldo = 9,
            Messi = 7
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Physical",
            Ronaldo = 10,
            Messi = 7
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Team Play",
            Ronaldo = 7,
            Messi = 9
        });
        this.Add(new FootballPlayerStatsItem()
        {
            Attribute = @"Heading",
            Ronaldo = 9,
            Messi = 6
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbDataChartCoreModule),
                typeof(IgbDataChartRadialModule),
                typeof(IgbDataChartRadialCoreModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbLegendModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Ronaldo vs Messi Player Stats
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbDataChart
        Name="chart"
        @ref="chart"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        SelectionMode="SeriesSelectionMode.SelectionColorFill"
        SelectionBehavior="SeriesSelectionBehavior.PerSeriesMultiSelect">
            <IgbCategoryAngleAxis
            Name="angleAxis"
            @ref="angleAxis"
            DataSource="FootballPlayerStats"
            Label="Attribute">
            </IgbCategoryAngleAxis>

            <IgbNumericRadiusAxis
            Name="radiusAxis"
            @ref="radiusAxis"
            InnerRadiusExtentScale="0.1"
            Interval="2"
            MinimumValue="0"
            MaximumValue="10">
            </IgbNumericRadiusAxis>

            <IgbRadialColumnSeries
            Name="RadialColumnSeries1"
            @ref="radialColumnSeries1"
            DataSource="FootballPlayerStats"
            AngleAxisName="angleAxis"
            ValueAxisName="radiusAxis"
            ValueMemberPath="Ronaldo"
            ShowDefaultTooltip="false"
            AreaFillOpacity="0.8"
            Thickness="3"
            Title="Ronaldo"
            SelectionBrush="yellow">
            </IgbRadialColumnSeries>

            <IgbRadialColumnSeries
            Name="RadialColumnSeries2"
            @ref="radialColumnSeries2"
            DataSource="FootballPlayerStats"
            AngleAxisName="angleAxis"
            ValueAxisName="radiusAxis"
            ValueMemberPath="Messi"
            ShowDefaultTooltip="false"
            AreaFillOpacity="0.8"
            Thickness="3"
            Title="Messi"
            SelectionBrush="cyan">
            </IgbRadialColumnSeries>

        </IgbDataChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;
        var angleAxis = this.angleAxis;
        var radiusAxis = this.radiusAxis;
        var radialColumnSeries1 = this.radialColumnSeries1;
        var radialColumnSeries2 = this.radialColumnSeries2;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbDataChart chart;
    private IgbCategoryAngleAxis angleAxis;
    private IgbNumericRadiusAxis radiusAxis;
    private IgbRadialColumnSeries radialColumnSeries1;
    private IgbRadialColumnSeries radialColumnSeries2;

    private FootballPlayerStats _footballPlayerStats = null;
    public FootballPlayerStats FootballPlayerStats
    {
        get
        {
            if (_footballPlayerStats == null)
            {
                _footballPlayerStats = new FootballPlayerStats();
            }
            return _footballPlayerStats;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

プログラムによる選択

チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、IgbCategoryChart の SelectedSeriesCollection に項目を追加することで実現できます。IgbChartSelection オブジェクトの Matcher プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される ValueMemberPath を使用できます。

マッチャーは、IgbDataChart のように実際のシリーズにアクセスできない場合、IgbCategoryChart などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。

たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class EnergyRenewableConsumptionItem
{
    public string Location { get; set; }
    public double Year { get; set; }
    public double Hydro { get; set; }
    public double Solar { get; set; }
    public double Wind { get; set; }
    public double Other { get; set; }
}

public class EnergyRenewableConsumption
    : List<EnergyRenewableConsumptionItem>
{
    public EnergyRenewableConsumption()
    {
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"China",
            Year = 2019,
            Hydro = 1269.5,
            Solar = 223,
            Wind = 405.2,
            Other = 102.8
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Europe",
            Year = 2019,
            Hydro = 632.54,
            Solar = 154,
            Wind = 461.3,
            Other = 220.3
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"USA",
            Year = 2019,
            Hydro = 271.16,
            Solar = 108,
            Wind = 303.4,
            Other = 78.34
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Brazil",
            Year = 2019,
            Hydro = 399.3,
            Solar = 5.5,
            Wind = 55.83,
            Other = 56.25
        });
        this.Add(new EnergyRenewableConsumptionItem()
        {
            Location = @"Canada",
            Year = 2019,
            Hydro = 381.98,
            Solar = 4.3,
            Wind = 34.17,
            Other = 10.81
        });
    }
}csコピー

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbInputModule),
                typeof(IgbLegendModule),
                typeof(IgbCategoryChartModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartCoreModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System
@using System.Collections.Generic
@using System.Collections

<div class="container vertical">
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div class="legend">
        <IgbLegend
        Name="legend"
        @ref="legend"
        Orientation="LegendOrientation.Horizontal">
        </IgbLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        DataSource="EnergyRenewableConsumption"
        ChartType="CategoryChartType.Column"
        CrosshairsDisplayMode="CrosshairsDisplayMode.None"
        YAxisTitle="TWh"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        SelectionMode="SeriesSelectionMode.SelectionColorFill"
        SelectionBehavior="SeriesSelectionBehavior.Auto"
        SelectionBrush="orange">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var legend = this.legend;
        var chart = this.chart;

        this.BindElements = () => {
            chart.Legend = this.legend;
        };
        this.BindElements();

        if (firstRender) {
            this.SelectionMatcherOnViewInit();
        }
    }

    private IgbLegend legend;
    private IgbCategoryChart chart;

    private System.Threading.Timer _timer;

    public void SelectionMatcherOnViewInit()
    {
    	_timer = new System.Threading.Timer((_) =>
    	{
    		addSelection();
    	}, null, 1000, 0);
    	_timer = null;
    }

    private void addSelection()
    {
    	var chart = this.chart;
    	//var data = (IList)chart.DataSource;
    	var data = this.EnergyRenewableConsumption;
    	IgbChartSelection selection = new IgbChartSelection();
    	selection.Item = data[1];
    	IgbSeriesMatcher matcher = new IgbSeriesMatcher();
    	matcher.MemberPath = "Hydro";
    	matcher.MemberPathType = "ValueMemberPath";
    	selection.Matcher = matcher;

    	chart.SelectedSeriesItems.Add(selection);

    	IgbChartSelection selection2 = new IgbChartSelection();
    	selection2 = new IgbChartSelection();
    	selection2.Item = data[2];
    	IgbSeriesMatcher matcher2 = new IgbSeriesMatcher();
    	matcher2 = new IgbSeriesMatcher();
    	matcher2.MemberPath = "Wind";
    	matcher2.MemberPathType = "ValueMemberPath";
    	selection2.Matcher = matcher2;

    	chart.SelectedSeriesItems.Add(selection2);
    }

    private EnergyRenewableConsumption _energyRenewableConsumption = null;
    public EnergyRenewableConsumption EnergyRenewableConsumption
    {
        get
        {
            if (_energyRenewableConsumption == null)
            {
                _energyRenewableConsumption = new EnergyRenewableConsumption();
            }
            return _energyRenewableConsumption;
        }
    }

}razorコピー

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssコピー

API リファレンス

以下は上記のセクションで説明した API メンバーのリストです。

IgbCategoryChart プロパティ	IgbDataChart プロパティ