Blazor Chart Selection

Blazor의 Ignite UI for Blazor 선택 기능 {ComponentTitle}을 사용하면 사용자가 차트 내에서 단일 또는 여러 시리즈를 대화형으로 선택, 강조, 윤곽선 지정 및 그 반대로 선택 해제할 수 있습니다. 이를 통해 사용자가 보다 의미 있는 방식으로 제시된 데이터와 상호 작용하는 방법에 대한 다양한 가능성이 제공됩니다.

Configuring Selection

기본 동작 SelectionMode은 해제되어 있으며 다음 옵션 중 하나를 선택해야 합니다. 다음에서 사용할 수 있는 몇 가지 선택 모드가 있습니다. {ComponentName}

Auto
없음
Brighten
페이드Others
그레이스케일기타
FocusColorThickOutline (영문)
FocusColorOutline
SelectionColorThickOutline (영문)
SelectionColorOutline
FocusColorFill
SelectionColorFill (영문)
두껍게 외곽선

Brighten 선택한 항목이 FadeOthers 희미해지고 반대 효과가 발생합니다. GrayscaleOthers는 시리즈의 나머지 부분과 FadeOthers 비슷하게 동작하지만 대신 회색으로 표시됩니다. 이렇게 하면 모든 SelectionBrush 설정이 재정의됩니다. SelectionColorOutline SelectionColorThickOutline 시리즈 주위에 테두리를 그립니다.

이와 함께, a SelectionBehavior는 선택되는 항목에 대한 더 큰 제어를 제공하는 데 사용할 수 있습니다. 자동의 기본 동작은 다음과 같습니다 PerSeriesAndDataItemMultiSelect.

Auto
PerDataItemMultiSelect
PerDataItemSingleSelect
PerSeriesAndDataItemMultiSelect
PerSeriesAndDataItemSingleSelect
PerSeriesAndDataItemGlobalSingleSelect
PerSeriesMultiSelect
PerSeriesSingleSelect (영문)

Configuring Selection via Color Fill

다음 예제에서는 와 SelectionColorFill Auto 선택 동작 PerSeriesAndDataItemMultiSelect의 조합을 보여 줍니다. Color Fills는 전체 시리즈 항목의 배경 색상을 변경할 때 유용한 시각적 신호를 제공합니다. 각 항목을 클릭하면 항목이 녹색에서 보라색으로 변경되는 것을 볼 수 있습니다.

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Configuring Multiple Selection

다른 선택 모드는 다양한 선택 방법을 제공합니다. 예를 들어 SelectionBehavior와 PerDataItemMultiSelect 여러 시리즈가 있는 경우 전체 범주의 모든 시리즈에 영향을 미치며 범주 간에 선택할 수 있습니다. 와 비교 PerDataItemSingleSelect, 한 번에 하나의 항목 범주만 선택할 수 있습니다. 이는 여러 시리즈가 서로 다른 데이터 소스에 바인딩되고 범주 간 선택을 더 잘 제어할 수 있는 경우에 유용합니다. PerSeriesAndDataItemGlobalSingleSelect 한 번에 모든 범주에서 단일 시리즈를 선택할 수 있습니다.

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

Configuring Outline Selection

이 적용되면 FocusBrush 속성이 포커스 옵션 중 하나로 설정될 때 SelectionMode 선택한 시리즈가 테두리와 함께 나타납니다.

Radial Series Selection

이 예제에서는 각 방사형 시리즈를 다른 색상으로 선택할 수 있는 다른 시리즈 유형을 IgbDataChart 보여 줍니다.

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

Programmatic Selection

차트 선택은 차트에서 선택한 항목을 시작 또는 런타임 시 볼 수 있는 코드에서 구성할 수도 있습니다. 이것은 에 항목을 추가하여 수행할 수 있습니다 SelectedSeriesCollection IgbCategoryChart. Matcher 개체의 속성을 IgbChartSelection 사용하면 "matcher"를 기반으로 계열을 선택할 수 있으며, 이는 차트에서 실제 계열에 액세스할 수 없는 경우에 이상적입니다. 데이터 원본에 포함된 속성을 알고 있으면 계열을 ValueMemberPath 사용할 수 있습니다.

matcher는 와 같이 IgbDataChart 실제 시리즈에 액세스할 수 없는 경우와 같은 IgbCategoryChart 차트에서 사용하는 데 이상적입니다. 이 경우 데이터 원본에 포함된 속성을 알고 있으면 계열에 포함될 ValueMemberPaths를 추측할 수 있습니다. 예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 강조 표시하려면 다음 속성 집합이 있는 matcher를 사용하여 컬렉션에 ChartSelection 개체를 SelectedSeriesItems 추가할 수 있습니다

예를 들어 데이터 소스에 Nuclear, Coal, Oil, Solar 숫자 속성이 있는 경우 이러한 각 속성에 대해 생성된 시리즈가 있음을 알 수 있습니다. Solar 값에 바인딩된 계열을 선택하려는 경우 다음 속성 집합이 있는 검사기를 사용하여 SelectedSeriesItems 컬렉션에 ChartSelection 개체를 추가할 수 있습니다.

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 References

다음은 위 섹션에서 언급된 API 멤버 목록입니다.

`IgbCategoryChart` Properties	`IgbDataChart` Properties