Blazor 차트 주석

Blazor 차트의 호버 상호작용과 주석은 시리즈 컬렉션에 추가되는 시리즈인 호버 상호작용 레이어를 통해 구현됩니다. 이러한 레이어는 커서 위치에 따라 달라집니다. 이러한 주석 레이어 각각은 개별적으로 사용하거나 다른 레이어와 결합하여 강력한 호버 상호작용을 제공할 수 있는 다양한 호버 상호작용을 제공합니다.

Blazor Annotations Example

다음 예는 Blazor 차트에서 사용 가능한 주석 레이어를 보여줍니다. 확인란을 클릭하여 각 레이어를 켜고 끕니다.

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(IgbLegendModule),
                typeof(IgbInputModule),
                typeof(IgbPropertyEditorPanelModule),
                typeof(IgbCategoryChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class EnergyRenewableInfo
    {
        public string Year { get; set; }
        public int Europe { get; set; }
        public int China { get; set; }
        public int USA { get; set; }
    }

    public class EnergyRenewableData : List<EnergyRenewableInfo>
    {
        public EnergyRenewableData()
        {
            Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
            Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
            Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
            Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
            Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
            Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
            Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
            Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
            Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
            <label class="options-label">Annotations: </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnCrosshairsVisibleCheckboxChange" checked="@CrosshairsVisible" /> Crosshair
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnCalloutsVisibleCheckboxChange" checked="@CalloutsVisible" /> Callouts
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnFinalValuesCheckboxChange" checked="@FinalValuesVisible" /> Final Values
            </label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnMarkersVisibleCheckBoxChange" checked="@MarkersVisible" /> Markers
            </label>
    </div>

    <div class="container vertical">
        @if (Data != null)
        {
            <IgbCategoryChart Height="100%" Width="100%"
                           @ref="Chart"
                           DataSource="Data"
                           ChartType="CategoryChartType.Line"
                           Subtitle="Renewable Electricity Generated"
                           YAxisTitle="TWh"
                           Thickness="2"
                           CrosshairsSnapToData="true"
                           CrosshairsDisplayMode="@CrosshairMode"
                           CrosshairsAnnotationEnabled="@CrosshairsVisible"
                           FinalValueAnnotationsVisible="@FinalValuesVisible"
                           YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
                           CalloutsVisible="@CalloutsVisible"
                           CalloutsYMemberPath="Value"
                           CalloutsXMemberPath="Index"
                           CalloutsLabelMemberPath="Label"
                           CalloutsDataSource="CalloutData"
                           ExcludedProperties="@(new string[] { "China", "Europe" })"
                           ComputedPlotAreaMarginMode=ComputedPlotAreaMarginMode.Series>
            </IgbCategoryChart>
        }
    </div>
</div>

@code {

    private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
    private List<CalloutInfo> CalloutData = new List<CalloutInfo>();

    private IgbCategoryChart _Chart;
    private IgbCategoryChart Chart
    {
        get { return _Chart; }
        set { _Chart = value;
            Chart.MarkerTypes.Add(MarkerType.Circle);
            StateHasChanged(); }
    }
    private bool MarkersVisible = true;
    private bool FinalValuesVisible = true;
    private bool CalloutsVisible = true;
    private bool CrosshairsVisible = true;

    private CrosshairsDisplayMode CrosshairMode = CrosshairsDisplayMode.Both;

    private void OnMarkersVisibleCheckBoxChange(ChangeEventArgs args)
    {
        Chart.MarkerTypes.Clear();
        bool value = args.Value != null ? (bool)args.Value : false;
        if (value == true)
        {
            Chart.MarkerTypes.Add(MarkerType.Automatic);
        }
        else {
            Chart.MarkerTypes.Add(MarkerType.None);
        }
        this.MarkersVisible = value;
    }
    private void OnFinalValuesCheckboxChange(ChangeEventArgs args)
    {
        this.FinalValuesVisible = (bool)args.Value;
    }
    private void OnCalloutsVisibleCheckboxChange(ChangeEventArgs args)
    {
        this.CalloutsVisible = (bool)args.Value;
    }
    private void OnCrosshairsVisibleCheckboxChange(ChangeEventArgs args)
    {
        bool isVisible = (bool)args.Value;
        this.CrosshairMode = isVisible ? CrosshairsDisplayMode.Both : CrosshairsDisplayMode.None;
    }
    protected override void OnInitialized()
    {

        for (int i = 0; i < this.Data.Count; i++)
        {
            CalloutData.Add(
                new CalloutInfo {
                    Index = i, Label =
                    this.Data[i].USA + " " + "TWh",
                    Value = this.Data[i].USA });
        }
    }

    public class CalloutInfo
    {
        public int Index { get; set; }
        public int Value { get; set; }
        public string Label { get; set; }
    }
}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.

이 샘플이 마음에 드시나요? 전체 Blazor 툴킷에 액세스하여 몇 분 만에 나만의 앱을 빌드하세요. 무료로 다운로드하세요.

Blazor Crosshair Layer

IgbCrosshairLayer는 각 계열이 별도의 선 세트를 렌더링하는 대상으로 구성된 모든 계열의 실제 값에서 교차하는 교차 선으로 렌더링합니다.

십자형 유형은 다음과 같습니다.

수평의
수직의
둘 다

CrosshairsSnapToData 속성을 true로 설정하여 차트의 십자선을 데이터 포인트에 맞추도록 구성할 수도 있습니다. 그렇지 않으면 십자선이 데이터 포인트 사이에 보간됩니다. 축을 따라 십자선 값을 표시하도록 주석을 활성화할 수도 있습니다.

레이어가 하나의 특정 시리즈에만 표시되도록 십자선 레이어를 구성할 수 있습니다. 기본적으로 레이어는 차트 컨트롤의 모든 시리즈를 대상으로 하기 때문입니다. 이를 달성하려면 TargetSeries 속성을 설정하십시오.

기본적으로 십자선의 색상은 상호 작용하는 계열보다 밝은 색상입니다. 그러나 이 기본 설정을 무시하여 십자선에 사용할 색상을 선택할 수 있습니다. 이는 십자선 레이어의 Brush 속성을 설정하여 수행됩니다.

다음 예에서는 십자선 레이어를 구성하되 단일 시리즈를 대상으로 하고 유형을 세로로 설정하고 브러시 색상의 스타일을 지정하는 방법을 보여줍니다.

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(IgbDataChartCategoryModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbLineSeriesModule),
                typeof(IgbCrosshairLayerModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class EnergyRenewableInfo
    {
        public string Year { get; set; }
        public int Europe { get; set; }
        public int China { get; set; }
        public int USA { get; set; }
    }

    public class EnergyRenewableData : List<EnergyRenewableInfo>
    {
        public EnergyRenewableData()
        {
            Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
            Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
            Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
            Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
            Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
            Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
            Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
            Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
            Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
        <IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
            <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
            <IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />

            <IgbLineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="USA" />

            <IgbCrosshairLayer HorizontalLineVisibility="Visibility.Collapsed" Brush="DodgerBlue" />
        </IgbDataChart>
        }
    </div>
</div>

@code {
    

    private List<EnergyRenewableInfo> Data = new EnergyRenewableData();

}razor

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

Blazor Final Value Layer

IgbDataChart 컨트롤의 IgbFinalValueLayer는 시리즈에 표시되는 종료 값의 축을 따라 빠른 보기를 제공합니다.

서로 다른 구성으로 여러 최종 값 계층을 표시하려는 경우 특정 시리즈를 대상으로 이 주석을 구성할 수 있습니다. 이는 TargetSeries 속성을 설정하여 수행할 수 있습니다.

다음 속성을 설정하여 이 주석을 사용자 정의할 수도 있습니다.

AxisAnnotationBackground: 이 속성은 주석의 배경색에 대한 브러시를 선택하는 데 사용됩니다. 기본값은 시리즈 브러시를 사용하는 것입니다.
AxisAnnotationTextColor: 이 속성은 주석의 텍스트 색상에 대한 브러시를 선택하는 데 사용됩니다.
AxisAnnotationOutline: 이 속성은 주석의 윤곽선 색상에 대한 브러시를 선택하는 데 사용됩니다.

다음 예에서는 위에 나열된 속성을 설정하여 최종 값 계층 주석의 스타일을 지정하는 방법을 보여줍니다.

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(IgbDataChartCategoryModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbLineSeriesModule),
                typeof(IgbFinalValueLayerModule)
);
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Infragistics.Samples
{
    public class EnergyRenewableInfo
    {
        public string Year { get; set; }
        public int Europe { get; set; }
        public int China { get; set; }
        public int USA { get; set; }
    }

    public class EnergyRenewableData : List<EnergyRenewableInfo>
    {
        public EnergyRenewableData()
        {
            Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
            Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
            Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
            Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
            Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
            Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
            Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
            Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
            Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
            Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
        <IgbDataChart Height="100%" Width="100%" Subtitle="Renewable Energy Generated">
            <IgbCategoryXAxis Name="xAxis" DataSource="Data" Label="Year" />
            <IgbNumericYAxis Name="yAxis" Title="TWh" LabelLocation="AxisLabelsLocation.OutsideRight" />

            <IgbLineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="Data" ValueMemberPath="USA" />

            <IgbFinalValueLayer AxisAnnotationBackground="Orange" AxisAnnotationTextColor="Black" AxisAnnotationOutline="Black"/>
        </IgbDataChart>
        }
    </div>
</div>

@code {
    

    private List<EnergyRenewableInfo> Data = new EnergyRenewableData();

}razor

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

Blazor Callout Layer

IgbCalloutLayer는 차트 컨트롤의 기존 데이터 또는 새 데이터의 주석을 표시합니다. 주석은 데이터 소스의 지정된 데이터 값 옆에 표시됩니다.

설명선 주석을 사용하여 메모나 데이터 포인트에 대한 특정 세부정보 등 사용자에게 알리고 싶은 추가 정보를 표시하세요.

서로 다른 구성으로 여러 콜아웃 레이어를 표시하려는 경우 특정 시리즈를 대상으로 콜아웃을 구성할 수 있습니다. 이는 TargetSeries 속성을 설정하여 수행할 수 있습니다.

다음 속성을 설정하여 이 주석을 사용자 정의할 수도 있습니다.

CalloutLeaderBrush: 이 속성은 레이어 설명선의 지시선에 대한 브러시를 선택하는 데 사용됩니다.
CalloutOutline: 이 속성은 주석의 윤곽선 색상에 대한 브러시를 선택하는 데 사용됩니다.
CalloutBackground: 이 속성은 주석의 배경색에 대한 브러시를 선택하는 데 사용됩니다. 기본값은 시리즈 브러시를 사용하는 것입니다.
CalloutTextColor: 이 속성은 주석의 텍스트 색상에 대한 브러시를 선택하는 데 사용됩니다.
CalloutStrokeThickness: 이 속성은 콜아웃 뒷면의 두께를 선택하는 데 사용됩니다.
CalloutCornerRadius: 이 속성은 콜아웃의 모서리를 곡선으로 만드는 데 사용됩니다.
AllowedPositions: 이 속성은 콜아웃 레이어에서 사용할 수 있는 위치를 선택하는 데 사용됩니다. 예. 상단, 하단

다음 예에서는 위에 나열된 속성을 설정하여 콜아웃 레이어 주석의 스타일을 지정하는 방법을 보여줍니다.

using System;
using System.Collections.Generic;
public class CountryRenewableElectricityItem
{
    public string Year { get; set; }
    public double Europe { get; set; }
    public double China { get; set; }
    public double America { get; set; }
}

public class CountryRenewableElectricity
    : List<CountryRenewableElectricityItem>
{
    public CountryRenewableElectricity()
    {
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2009",
            Europe = 34,
            China = 21,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2010",
            Europe = 43,
            China = 26,
            America = 24
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2011",
            Europe = 66,
            China = 29,
            America = 28
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2012",
            Europe = 69,
            China = 32,
            America = 26
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2013",
            Europe = 58,
            China = 47,
            America = 38
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2014",
            Europe = 40,
            China = 46,
            America = 31
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2015",
            Europe = 78,
            China = 50,
            America = 19
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2016",
            Europe = 13,
            China = 90,
            America = 52
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2017",
            Europe = 78,
            China = 132,
            America = 50
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2018",
            Europe = 40,
            China = 134,
            America = 34
        });
        this.Add(new CountryRenewableElectricityItem()
        {
            Year = @"2019",
            Europe = 80,
            China = 96,
            America = 38
        });
    }
}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(IgbDataChartCategoryModule),
                typeof(IgbDataChartAnnotationModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbAnnotationLayerProxyModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div class="container vertical fill">
        <IgbDataChart
        ShouldAutoExpandMarginForInitialLabels="true"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        Name="chart"
        @ref="chart">
            <IgbCategoryXAxis
            Name="xAxis"
            @ref="xAxis"
            DataSource="CountryRenewableElectricity"
            Label="Year">
            </IgbCategoryXAxis>

            <IgbNumericYAxis
            Name="yAxis"
            @ref="yAxis"
            Title="TWh"
            LabelLocation="AxisLabelsLocation.OutsideRight">
            </IgbNumericYAxis>

            <IgbLineSeries
            Name="lineSeries1"
            @ref="lineSeries1"
            XAxisName="xAxis"
            YAxisName="yAxis"
            DataSource="CountryRenewableElectricity"
            ValueMemberPath="America"
            Brush="#8961a9"
            MarkerOutline="#8961a9"
            ShouldHideAutoCallouts="false">
            </IgbLineSeries>

            <IgbCalloutLayer
            Name="CalloutLayer1"
            @ref="calloutLayer1"
            IsAutoCalloutBehaviorEnabled="true"
            CalloutLeaderBrush="#8961a9"
            CalloutOutline="#8961a9"
            CalloutBackground="white"
            CalloutTextColor="#8961a9"
            CalloutStrokeThickness="1"
            CalloutCollisionMode="CalloutCollisionMode.Greedy">
            </IgbCalloutLayer>

        </IgbDataChart>

    </div>
</div>

@code {
    

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

    }

    private IgbDataChart chart;
    private IgbCategoryXAxis xAxis;
    private IgbNumericYAxis yAxis;
    private IgbLineSeries lineSeries1;
    private IgbCalloutLayer calloutLayer1;

    private CountryRenewableElectricity _countryRenewableElectricity = null;
    public CountryRenewableElectricity CountryRenewableElectricity
    {
        get
        {
            if (_countryRenewableElectricity == null)
            {
                _countryRenewableElectricity = new CountryRenewableElectricity();
            }
            return _countryRenewableElectricity;
        }
    }

}razor

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

Timeline Styling

다음 예에서는 위에 나열된 AllowedPositions 속성을 설정하여 주석이 있는 타임라인으로 데이터 차트의 스타일을 지정하는 방법을 보여줍니다.

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(IgbDataChartCategoryCoreModule),
                 typeof(IgbDataChartCategoryModule),
                 typeof(IgbDataChartVerticalCategoryModule),
                 typeof(IgbDataChartInteractivityModule),
                 typeof(IgbDataChartExtendedAxesModule),
                 typeof(IgbDataChartAnnotationModule),
                 typeof(IgbTimeXAxisModule),
                 typeof(IgbAnnotationLayerProxyModule),
                 typeof(IgbCalloutLayerModule)
            );
            await builder.Build().RunAsync();
        }
    }
}cs

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SampleTimelineData
    {
        public static List<SampleTimelineItem> Create() {
            var data = new List<SampleTimelineItem>() {
                new SampleTimelineItem { Year = "JUN 06, 2016", Date = new DateTime(2016, 6, 23),  Y = 5, Details = "UK votes to exit the EU"},
                new SampleTimelineItem { Year = "MAR 29, 2017", Date = new DateTime(2017, 3, 29),  Y = 5, Details = "The UK triggers Article 50"},
                new SampleTimelineItem { Year = "JUN 19, 2017", Date = new DateTime(2017, 6, 19),  Y = 5, Details = "Brexit negotiations begin"},
                new SampleTimelineItem { Year = "MAR 19, 2018", Date = new DateTime(2018, 3, 19),  Y = 5, Details = "The EU and the UK agree on a transition phase"},
                new SampleTimelineItem { Year = "NOV 25, 2018", Date = new DateTime(2018, 12, 25), Y = 5, Details = "Draft withdrawl deal agreed"},
                new SampleTimelineItem { Year = "OCT 29, 2019", Date = new DateTime(2019, 10, 29), Y = 5, Details = "EU heads of state and government approve postponing the Brexit date"},
                new SampleTimelineItem { Year = "DEC 31, 2020", Date = new DateTime(2020, 12, 31), Y = 5, Details = "Transition period ends"},
            };
            return data;
        }
    }

    public class SampleTimelineItem
    {
        public string Details { get; set; }
        public int X { get; set; }
        public int Y { get; set; }
        public string Year { get; set; }
        public DateTime Date { get; set; }
    }
}cs


@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <IgbDataChart Height="100%" Width="100%"
        @ref="Chart"
        IsHorizontalZoomEnabled="false" IsVerticalZoomEnabled="false"
        ChartTitle="Brexit Timeline"
        Subtitle="Brexit: Key events in the process of the UK's exit from the EU"
        TitleTopMargin=50
        PlotAreaMarginLeft=100
        PlotAreaMarginRight=100>
    </IgbDataChart>
</div>

@code {
    
    private List<SampleTimelineItem> CategoryData;
    private IgbNumericYAxis NumericYAxis;
    private IgbTimeXAxis TimeXAxis;
    private IgbCalloutLayer CalloutLayer;
    private IgbLineSeries LineSeries1;

    private IgbDataChart _chart;
    private IgbDataChart Chart
    {
        get { return _chart; }
        set
        {
            _chart = value;
            this.OnChart();

            value.Axes.Add(this.TimeXAxis);
            value.Axes.Add(this.NumericYAxis);
            value.Series.Add(this.LineSeries1);
            value.Series.Add(this.CalloutLayer);
            StateHasChanged();
        }
    }

    private void OnChart()
    {
        this.CategoryData = SampleTimelineData.Create();
        this.InitAxes();
        this.InitCategorySeries();
    }

    public void InitCategorySeries()
    {
        this.LineSeries1 = new IgbLineSeries()
            {
                Brush = "Navy",
                DataSource = this.CategoryData,
                XAxisName = "TimeXAxis",
                YAxisName = "NumericYAxis",
                ValueMemberPath = "Y",
                Thickness = 15,
                MarkerThickness = 15,
                MarkerBrush = "#EC0D00",
                MarkerOutline = "#EC0D00",
                MarkerFillMode = MarkerFillMode.MatchMarkerOutline,
                ShowDefaultTooltip = false,
            };

        this.CalloutLayer = new IgbCalloutLayer()
            {
                TargetSeries = this.LineSeries1,
                DataSource = this.CategoryData,
                XMemberPath = "Date",
                YMemberPath = "Y",
                LabelMemberPath = "Year",
                IsAutoCalloutBehaviorEnabled = false,
                UseValueForAutoCalloutLabels = false,
                CalloutLeaderBrush = "#EC0D00",
                CalloutTextColor = "Navy",
                CalloutOutline = "#EC0D00",
                CalloutBackground = "Transparent",
                IsCalloutOffsettingEnabled = false,
                TextStyle = "font-size: 25px",
                CalloutPositionPadding = 50,
                CalloutCollisionMode = CalloutCollisionMode.Greedy,
                ShowDefaultTooltip = false,
        };

        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Top);
        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopLeft);
        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.TopRight);
        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.Bottom);
        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomLeft);
        this.CalloutLayer.AllowedPositions.Add(CalloutPlacementPositions.BottomRight);
    }

    public void InitAxes()
    {
        this.NumericYAxis = new IgbNumericYAxis() { Name = "NumericYAxis", Title = "Numeric Y Axis", MinimumValue=0, MaximumValue=10, LabelVisibility = Visibility.Collapsed, MajorStrokeThickness=0.0 };
        this.TimeXAxis = new IgbTimeXAxis() { Name = "TimeXAxis", Title = "Time X Axis", DataSource = this.CategoryData, DateTimeMemberPath = "Date", LabelVisibility = Visibility.Collapsed };
    }

}razor

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

API References

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