Blazor 축 옵션

모든 Ignite UI for Blazor 차트에서 축은 제목, 레이블, 범위와 같은 시각적 구성에 대한 속성을 제공합니다. 이러한 기능은 아래에 제공된 예에서 설명됩니다.

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

無料で試してみる

Axis Titles Example

Blazor 차트의 축 제목 기능을 사용하면 차트에 문맥별 정보를 추가할 수 있습니다. 다양한 글꼴 스타일, 색상, 여백 및 정렬을 적용하는 등 다양한 방법으로 축 제목의 모양과 느낌을 사용자 지정할 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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

@using IgniteUI.Blazor.Controls

<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="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        XAxisTitle="Year"
        XAxisTitleTextColor="gray"
        XAxisTitleTextStyle="10pt 'Titillium Web'"
        XAxisTitleAngle="0"
        YAxisTitle="Trillions of Watt-hours (Twh)"
        YAxisTitleTextColor="gray"
        YAxisTitleTextStyle="10pt 'Titillium Web'"
        YAxisTitleAngle="90"
        YAxisTitleLeftMargin="5">
        </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();

    }

    private IgbLegend legend;
    private IgbCategoryChart chart;

    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コピー

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.

Axis Labels Example

Blazor Charts를 사용하면 차트의 축에 표시된 레이블의 글꼴을 구성, 서식 지정 및 스타일링하는 데 대한 완전한 제어가 가능합니다. 축 레이블의 회전 각도, 여백, 수평 및 수직 정렬, 색상, 패딩 및 가시성을 변경할 수 있습니다. 다음 예에서는 축의 이러한 기능을 사용하는 방법을 보여줍니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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(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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisLabelAngle"
            Name="XAxisLabelAngleEditor"
            @ref="xAxisLabelAngleEditor"
            Label="X Axis Label Angle"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "0", "45", "90", "135", "180", "225", "270" })"
            DropDownValues="@(new string[] { "0", "45", "90", "135", "180", "225", "270" })"
            PrimitiveValue="0">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisLabelAngle"
            Name="YAxisLabelAngleEditor"
            @ref="yAxisLabelAngleEditor"
            Label="Y Axis Label Angle"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "-90", "-45", "0", "45", "90" })"
            DropDownValues="@(new string[] { "-90", "-45", "0", "45", "90" })"
            PrimitiveValue="0">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisLabelTextColor"
            Name="XAxisLabelTextColorEditor"
            @ref="xAxisLabelTextColorEditor"
            Label="Y Axis Label Color"
            ValueType="PropertyEditorValueType.EnumValue"
            ShouldOverrideDefaultEditor="true"
            DropDownNames="@(new string[] { "red", "green" })"
            DropDownValues="@(new string[] { "red", "green" })"
            PrimitiveValue="@("red")">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <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="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        TopMargin="20"
        XAxisLabelAngle="0"
        XAxisLabelTextColor="gray"
        XAxisLabelTextStyle="10pt 'Titillium Web'"
        XAxisLabelTopMargin="5"
        YAxisLabelAngle="0"
        YAxisLabelTextColor="gray"
        YAxisLabelTextStyle="10pt 'Titillium Web'"
        YAxisLabelRightMargin="5"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight"
        TitleTopMargin="10">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisLabelAngleEditor;
    private IgbPropertyEditorPropertyDescription yAxisLabelAngleEditor;
    private IgbPropertyEditorPropertyDescription xAxisLabelTextColorEditor;
    private IgbCategoryChart chart;

    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コピー

Axis Labels Management & Formatting

차트의 축에는 소유 축의 레이블에 사용할 수 있는 공간의 양에 관해 향상된 계산을 수행하는 기능이 있습니다. 이 향상된 계산을 통해 축은 주어진 축에 대해 더 많은 레이블을 표시하기 위해 주어진 공간의 양을 최적화할 수 있습니다.

이 향상된 계산은 옵트인해야 하는 작업이며 UseEnhancedIntervalManagement 속성을 true로 설정하여 수행할 수 있습니다. 그런 다음 축의 Interval 속성을 수동으로 설정하지 않고 축의 크기에 맞출 수 있는 만큼 많은 레이블을 표시하려는 경우 축의 EnhancedIntervalPreferMoreCategoryLabels 속성을 true로 설정할 수 있습니다.

또한 차트에는 할당된 공간에 맞지 않는 경우 레이블의 자동 회전을 고려하는 기능과 레이블이 들어갈 수 있도록 플롯 영역에 자동 여백을 적용하는 기능도 있습니다. 이는 먼저 차트의 AutoMarginAndAngleUpdateMode 속성을 SizeChanging 또는 SizeChangingAndZoom으로 설정하여 처음에 선택할 수 있는 것입니다. 원하는 경우 레이블에 적용된 자동 여백과 각도를 언제 재평가할지 차트에 알려줍니다.

​AutoMarginAndAngleUpdateMode 설정한 후 ShouldAutoExpandMarginForInitialLabels 속성을 true로 설정하여 자동 여백을 선택하거나 ShouldConsiderAutoRotationForInitialLabels 속성을 true로 설정하여 자동 회전을 수행할 수 있습니다. AutoExpandMarginExtraPadding 및 AutoExpandMarginMaximumValue를 설정하여 각각 추가 공간 또는 가능한 최대 여백을 제공함으로써 적용되는 자동 여백을 추가로 사용자 정의할 수도 있습니다.

다음과 같은 사용자 지정 레이블 형식 IgbNumberFormatSpecifier 그리고 IgbDateTimeFormatSpecifier를 통해 각 축에 추가할 수 있습니다. XAxisLabelFormatSpecifier 그리고 YAxisLabelFormatSpecifier 컬렉션. 일반적으로 Intl.NumberFormat 및 Intl.DateTimeFormat 언어에 민감한 숫자, 날짜 및 시간 형식을 적용하는 데 사용됩니다. 사용자 지정 형식을 레이블에 적용하려면 YAxisLabelFormat 또는 XAxisLabelFormat에서 데이터 항목의 속성 이름으로 설정해야 합니다. IgbCategoryChart 예. {Date}. 에 대한 IgbFinancialChart 숫자는 숫자 축을 사용하기 때문에 컨텍스트이므로 다음과 같이 설정해야 합니다. {0}.

다음 예에서는 미국 최고의 박스오피스 영화에 대한 $USD 가격을 나타내기 위해 IgbNumberFormatSpecifier를 사용하여 yAxis의 형식을 지정합니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
    public string Franchise { get; set; }
    public double TotalRevenue { get; set; }
    public double HighestGrossing { get; set; }
}

public class HighestGrossingMovies
    : List<HighestGrossingMoviesItem>
{
    public HighestGrossingMovies()
    {
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Marvel Universe",
            TotalRevenue = 22.55,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Star Wars",
            TotalRevenue = 10.32,
            HighestGrossing = 2.07
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Harry Potter",
            TotalRevenue = 9.19,
            HighestGrossing = 1.34
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Avengers",
            TotalRevenue = 7.76,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Spider Man",
            TotalRevenue = 7.22,
            HighestGrossing = 1.28
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"James Bond",
            TotalRevenue = 7.12,
            HighestGrossing = 1.11
        });
    }
}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(IgbDataLegendModule),
                typeof(IgbCategoryChartModule),
                typeof(IgbNumberFormatSpecifierModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="legend-title">
        Highest Grossing Movie Franchises
    </div>
    <div class="legend">
        <IgbDataLegend
        Name="legend"
        @ref="legend"
        ValueFormatString="{0} Billion"
        ValueFormatSpecifiers="NumberFormatSpecifier1">
        </IgbDataLegend>

    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        DataSource="HighestGrossingMovies"
        ChartType="CategoryChartType.Column"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        FinalValueAnnotationsPrecision="2"
        DataToolTipValueFormatString="{0} Billion"
        DataToolTipValueFormatSpecifiers="NumberFormatSpecifier3"
        YAxisLabelFormat="{0}B"
        YAxisLabelFormatSpecifiers="NumberFormatSpecifier5">
        </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 = () => {
            legend.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbDataLegend legend;
    private IgbNumberFormatSpecifier[] _numberFormatSpecifier1 = null;
    public IgbNumberFormatSpecifier[] NumberFormatSpecifier1
    {
        get
        {
            if (this._numberFormatSpecifier1 == null)
            {
                var numberFormatSpecifier1 = new IgbNumberFormatSpecifier[1];
                var numberFormatSpecifier2 = new IgbNumberFormatSpecifier();
                numberFormatSpecifier2.Style = "currency";
                numberFormatSpecifier2.Currency = "USD";
                numberFormatSpecifier2.CurrencyDisplay = "symbol";
                numberFormatSpecifier2.MaximumFractionDigits = 2;
                numberFormatSpecifier2.MinimumFractionDigits = 2;
                numberFormatSpecifier1[0] = numberFormatSpecifier2;
                this._numberFormatSpecifier1 = numberFormatSpecifier1;
            }
            return this._numberFormatSpecifier1;
        }
    }
    private IgbCategoryChart chart;
    private IgbNumberFormatSpecifier[] _numberFormatSpecifier3 = null;
    public IgbNumberFormatSpecifier[] NumberFormatSpecifier3
    {
        get
        {
            if (this._numberFormatSpecifier3 == null)
            {
                var numberFormatSpecifier3 = new IgbNumberFormatSpecifier[1];
                var numberFormatSpecifier4 = new IgbNumberFormatSpecifier();
                numberFormatSpecifier4.Style = "currency";
                numberFormatSpecifier4.Currency = "USD";
                numberFormatSpecifier4.CurrencyDisplay = "symbol";
                numberFormatSpecifier4.MaximumFractionDigits = 2;
                numberFormatSpecifier4.MinimumFractionDigits = 2;
                numberFormatSpecifier3[0] = numberFormatSpecifier4;
                this._numberFormatSpecifier3 = numberFormatSpecifier3;
            }
            return this._numberFormatSpecifier3;
        }
    }
    private IgbNumberFormatSpecifier[] _numberFormatSpecifier5 = null;
    public IgbNumberFormatSpecifier[] NumberFormatSpecifier5
    {
        get
        {
            if (this._numberFormatSpecifier5 == null)
            {
                var numberFormatSpecifier5 = new IgbNumberFormatSpecifier[1];
                var numberFormatSpecifier6 = new IgbNumberFormatSpecifier();
                numberFormatSpecifier6.Style = "currency";
                numberFormatSpecifier6.Currency = "USD";
                numberFormatSpecifier6.CurrencyDisplay = "symbol";
                numberFormatSpecifier6.MinimumFractionDigits = 0;
                numberFormatSpecifier5[0] = numberFormatSpecifier6;
                this._numberFormatSpecifier5 = numberFormatSpecifier5;
            }
            return this._numberFormatSpecifier5;
        }
    }

    private HighestGrossingMovies _highestGrossingMovies = null;
    public HighestGrossingMovies HighestGrossingMovies
    {
        get
        {
            if (_highestGrossingMovies == null)
            {
                _highestGrossingMovies = new HighestGrossingMovies();
            }
            return _highestGrossingMovies;
        }
    }

}razorコピー

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

Axis Range Example

Blazor 차트에서 숫자 또는 시간 축의 범위 최소값과 범위 최대값을 정의할 수 있습니다. 범위 최소값은 축의 가장 낮은 값이고 범위 최대값은 축의 가장 높은 값입니다. 이는 YAxisMinimumValue 및 YAxisMaximumValue 옵션을 설정하여 설정합니다.

기본적으로 차트는 데이터의 해당 최저 및 최고 값 포인트를 기반으로 숫자 및 시간 축 범위의 최소값과 최대값을 계산하지만 이 자동 계산은 모든 경우에 데이터 포인트 세트에 적합하지 않을 수 있습니다. 예를 들어, 데이터의 최소값이 850인 경우 YAxisMinimumValue 800으로 설정하여 축 최소값과 데이터 포인트의 최저값 사이에 공백 값 50이 있도록 할 수 있습니다. YAxisMaximumValue 속성을 사용하여 데이터 포인트의 축 최소값과 최고값에 동일한 아이디어를 적용할 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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

@using IgniteUI.Blazor.Controls
@using IgniteUI.Blazor.Controls
@using System
@using System.Linq

<div class="container vertical">
    <div class="options vertical">
        <IgbPropertyEditorPanel

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMinimumValueHandler"
            Name="YAxisMinimumValue"
            @ref="yAxisMinimumValue"
            Label="Y Axis Minimum Value"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100" })"
            DropDownValues="@(new string[] { "0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100" })"
            PrimitiveValue="0"
            Changed="EditorChangeUpdateYAxisMinimumValue">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisMaximumValueHandler"
            Name="YAxisMaximumValue"
            @ref="yAxisMaximumValue"
            Label="Y Axis Maximum Value"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "100", "110", "120", "130", "140", "150", "160", "170", "180", "190", "200" })"
            DropDownValues="@(new string[] { "100", "110", "120", "130", "140", "150", "160", "170", "180", "190", "200" })"
            PrimitiveValue="150"
            Changed="EditorChangeUpdateYAxisMaximumValue">
            </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"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        YAxisMinimumValue="0"
        YAxisMaximumValue="150">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

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

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription yAxisMinimumValue;
    private IgbPropertyEditorPropertyDescription yAxisMaximumValue;
    private IgbCategoryChart chart;

    public void EditorChangeUpdateYAxisMinimumValue(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
    {
        var chart = this.chart;
        var yAxisMinimumVal = args.NewValue;
        chart.YAxisMinimumValue = Convert.ToDouble(yAxisMinimumVal);
    }

    public void EditorChangeUpdateYAxisMaximumValue(IgbPropertyEditorPropertyDescriptionChangedEventArgs args)
    {
        var chart = this.chart;
        var yAxisMaximumVal = args.NewValue;
        chart.YAxisMaximumValue = Convert.ToDouble(yAxisMaximumVal);
    }

    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コピー

Axis Modes & Scale

​IgbFinancialChart 및 IgbCategoryChart 컨트롤에서는 YAxisIsLogarithmic 속성이 true로 설정된 경우 데이터가 y축을 따라 로그 눈금으로 표시되는지, 이 속성이 false(기본값)로 설정된 경우 선형 눈금으로 표시되는지 선택할 수 있습니다. YAxisLogarithmBase 속성을 사용하면 로그 스케일의 기준을 기본값 10에서 다른 정수 값으로 변경할 수 있습니다.

그만큼 IgbFinancialChart 컨트롤을 사용하면 다음을 사용하여 y축을 따라 데이터가 표시되는 방식을 선택할 수 있습니다. YAxisMode 제공하는 부동산 Numeric 그리고 PercentChange 모드. 그만큼 Numeric 모드는 정확한 값으로 데이터를 플롯하는 반면 PercentChange 모드는 제공된 첫 번째 데이터 포인트를 기준으로 데이터를 백분율 변화로 표시합니다. 기본값은 다음과 같습니다. Numeric 방법.

게다가 YAxisMode 재산, IgbFinancialChart 통제는 XAxisMode 제공하는 부동산 Time 그리고 Ordinal x축 모드. 그만큼 Time 모드는 데이터의 공백을 위해 x축을 따라 공간을 렌더링합니다(예: 주말이나 공휴일에는 주식 거래가 없음). 그만큼 Ordinal 모드는 데이터가 존재하지 않는 날짜 영역을 축소합니다. 기본값은 다음과 같습니다. Ordinal 방법.

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(IgbFinancialChartModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;
using System.Linq;

namespace Infragistics.Samples
{
    public class StocksUtility
    {
        public static int intervalDays = 1;
        public static int intervalHours = 0;
        public static int intervalMinutes = 0;

        public static double priceStart = 200;
        public static double priceRange = 1;
        public static double volumeRange = 1000;
        public static double volumeStart = 20000000;

        public static Random rand = new Random();

        public static List<StockItem> GetStocksFrom(DateTime dateEnd, int years)
        {
            var dateStart = dateEnd.AddYears(-years);
            return GetStocksBetween(dateStart, dateEnd);
        }

        public static List<StockItem> GetStocksItems(int points)
        {
            intervalDays = 0;
            intervalHours = 1;
            intervalMinutes = 0;

            var today = DateTime.Today;
            var year = today.Year;
            var dateEnd = new DateTime(year, 11, 1);
            var dateStart = dateEnd.AddHours(-points);
            return GetStocksBetween(dateStart, dateEnd);
        }

        public static List<StockItem> GetStocksBetween(DateTime dateStart, DateTime dateEnd)
        {

            var interval = intervalDays * 24 * 60;
            interval += intervalHours * 60;
            interval += intervalMinutes;

            var time = dateStart.AddDays(0);
            var v = volumeStart;
            var o = priceStart;

            var h = o + (rand.NextDouble() * priceRange);
            var l = o - (rand.NextDouble() * priceRange);
            var c = l + (rand.NextDouble() * (h - l));

            var stock = new List<StockItem> { };
            while (time < dateEnd)
            {
                var stockItem =
                new StockItem {
                    Date = time, Open = o, High = h, Low = l, Close = c, Volume = v
                };

                stock.Add(stockItem);

                o = c + ((rand.NextDouble() - 0.5) * priceRange);
                if (o < 0)
                {
                    o = Math.Abs(o) + 2;
                }
                h = o + (rand.NextDouble() * priceRange);
                l = o - (rand.NextDouble() * priceRange);
                c = l + (rand.NextDouble() * (h - l));
                v = v + ((rand.NextDouble() - 0.5) * volumeRange);
                if (v < 0)
                {
                    v = Math.Abs(v) + 10000;
                }

                o = Math.Round(o * 100) / 100;
                h = Math.Round(h * 100) / 100;
                l = Math.Round(l * 100) / 100;
                c = Math.Round(c * 100) / 100;
                v = Math.Round(v * 100) / 100;

                time = time.AddMinutes(interval);
            }
            //setting data intent for Series Title
            //   (stock as any).__dataIntents = {
            //    close: ["SeriesTitle/Stock Prices"]
            //};

            return stock;
        }

        public static string ToShortString(double largeValue)
        {
            double roundValue;

            if (largeValue >= 1000000)
            {
                roundValue = Math.Round(largeValue / 100000) / 10;
                return roundValue + "M";
            }
            if (largeValue >= 1000)
            {
                roundValue = Math.Round(largeValue / 100) / 10;
                return roundValue + "K";
            }

            roundValue = Math.Round(largeValue);
            return roundValue + "";
        }

        public static DateTime GetYear(DateTime date)
        {
            return new DateTime(date.Year);
        }

        public static double GetQuarter(DateTime date)
        {
            var month = date.Month;
            double d = (month + 2) / 3;
            return Math.Round(d);
        }

        public static StockItem GetLastItem(List<StockItem> array)
        {
            if (array.Count == 0)
            {
                return null;
            }
            return array.LastOrDefault();
        }

        public static List<StockItem> GetNewItem(List<StockItem> array, int ?interval)
        {
            var lastItem = GetLastItem(array);

            if (interval == null)
            {
                interval = intervalDays * 24 * 60;
                interval += intervalHours * 60;
                interval += intervalMinutes;
            }

            var time = lastItem.Date.AddMinutes(interval.Value);
            double v = lastItem.Volume;
            double c = lastItem.Close;
            double h;
            double l;

            double o = c + ((rand.NextDouble() - 0.5) * priceRange);
            if (o < 0)
            {
                o = Math.Abs(o) + 2;
            }
            h = o + (rand.NextDouble() * priceRange);
            l = o - (rand.NextDouble() * priceRange);
            c = l + (rand.NextDouble() * (h - l));
            v += ((rand.NextDouble() - 0.5) * volumeRange);
            if (v < 0)
            {
                v = Math.Abs(v) + 10000;
            }

            var newValue = new List<StockItem> { new StockItem { Date = time, Open = o, High = h, Low = l, Close = c, Volume = v } };

            return newValue;
        }
    }

    public class StockItem
    {
        public DateTime Date { get; set; }
        public double Open { get; set; }
        public double High { get; set; }
        public double Low { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }
        public int Index { get; set; }
        public string Info { get; set; }
        public int Value { get; set; }

        public StockItem Clone()
        {
            var copy = new StockItem();
            copy.Date = this.Date;
            copy.Open = this.Open;
            copy.High = this.High;
            copy.Low = this.Low;
            copy.Close = this.Close;
            copy.Volume = this.Volume;
            return copy;
        }
    }

}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label class="options-label">X-Axis Mode: </label>
        <label class="options-item">
            <select @bind="@XAxisMode">
                <option>@FinancialChartXAxisMode.Ordinal</option>
                <option>@FinancialChartXAxisMode.Time</option>
            </select>
            <label class="options-label">Y-Axis Mode: </label>
            <select @bind="@YAxisMode">
                <option>@FinancialChartYAxisMode.Numeric</option>
                <option>@FinancialChartYAxisMode.PercentChange</option>
            </select>
            <label class="options-label">Y-Axis IsLogarithmic:</label>
            <label class="options-item">
                <input type="checkbox" @onchange="OnChanged" />
            </label>
        </label>
    </div>

    <div class="container vertical">

        @if (Data != null)
        {
            <IgbFinancialChart Width="100%"
                Height="100%"
                DataSource="Data"
                ChartType=FinancialChartType.Candle
                Thickness=2
                XAxisMode="XAxisMode"
                YAxisMode="YAxisMode"
                YAxisIsLogarithmic=YAxisIsLogarithmic/>
        }
    </div>
</div>

@code {

    public FinancialChartXAxisMode XAxisMode = FinancialChartXAxisMode.Ordinal;
    public FinancialChartYAxisMode YAxisMode = FinancialChartYAxisMode.Numeric;
    public bool YAxisIsLogarithmic = false;

    List<StockItem> Data;

    protected override void OnInitialized()
    {

        var today = DateTime.Now;
        var year = today.Year;
        var month = today.Month;
        var dateEnd = new DateTime(year, month, 1);
        var dateStart = new DateTime(year - 1, month, 1);
        this.Data = StocksUtility.GetStocksBetween(dateStart, dateEnd);
    }

    public void OnChanged(ChangeEventArgs args)
    {
        YAxisIsLogarithmic = (bool)args.Value;
    }
}razorコピー

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

Axis Gap Example

Blazor 차트의 XAxisGap 속성은 플롯된 시리즈의 열 또는 막대 사이의 공간 양을 결정합니다. 이 속성은 0.0과 1.0 사이의 숫자 값을 허용합니다. 값은 시리즈 사이의 사용 가능한 픽셀 수에서 갭의 상대적 너비를 나타냅니다. 이 속성을 0으로 설정하면 시리즈 사이에 갭이 렌더링되지 않고, 1로 설정하면 사용 가능한 최대 갭이 렌더링됩니다.

Blazor 차트의 XAxisMaximumGap 속성은 허용할 최대 갭 값을 결정합니다. 이 기본값은 1.0으로 설정되지만 XAxisGap 설정하는 내용에 따라 변경할 수 있습니다.

Blazor 차트의 XAxisMinimumGapSize 속성은 가능한 경우 범주 간 간격에 사용할 최소 픽셀 양을 결정합니다.

다음 예는 뉴욕시 센트럴 파크의 평균 최대 온도(섭씨)를 보여줍니다. 기둥 차트와 XAxisGap 처음에는 1로 설정되므로 열 사이에 전체 범주의 너비가 있게 됩니다. 이 예에는 간격을 구성할 수 있는 슬라이더가 있어 다양한 값의 역할을 확인할 수 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

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(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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisGap"
            Name="XAxisGap"
            @ref="xAxisGap"
            Label="X Axis - Gap"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.Slider"
            PrimitiveValue="0.5"
            Min="0"
            Max="1.5"
            Step="0.1">
            </IgbPropertyEditorPropertyDescription>

            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisMaximumGap"
            Name="XAxisMaximumGap"
            @ref="xAxisMaximumGap"
            Label="Maximum Gap"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.EnumValue"
            DropDownNames="@(new string[] { "1.5", "1.3", "1.0", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0" })"
            DropDownValues="@(new string[] { "1.5", "1.3", "1.0", "0.6", "0.5", "0.4", "0.3", "0.2", "0.1", "0" })"
            PrimitiveValue="0.5">
            </IgbPropertyEditorPropertyDescription>

        </IgbPropertyEditorPanel>

    </div>
    <div class="legend-title">
        Renewable Electricity Generated
    </div>
    <div class="container vertical fill">
        <IgbCategoryChart
        Name="chart"
        @ref="chart"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Column"
        CrosshairsSnapToData="true"
        YAxisTitle="TWh"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisInterval="1"
        XAxisGap="0.5"
        XAxisMaximumGap="1.5">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            propertyEditorPanel1.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisGap;
    private IgbPropertyEditorPropertyDescription xAxisMaximumGap;
    private IgbCategoryChart chart;

    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コピー

Axis Overlap Example

Blazor 차트의 XAxisOverlap 속성을 사용하면 플롯된 시리즈의 렌더링된 열 또는 막대의 겹침을 설정할 수 있습니다. 이 속성은 -1.0과 1.0 사이의 숫자 값을 허용합니다. 값은 각 시리즈에 할당된 사용 가능한 픽셀 수에서 상대적인 겹침을 나타냅니다. 이 속성을 음수 값(-1.0까지)으로 설정하면 범주가 서로 멀어져 서로 사이에 간격이 생깁니다. 반대로 이 속성을 양수 값(1.0까지)으로 설정하면 범주가 서로 겹칩니다. 값 1은 차트가 범주를 서로 위에 렌더링하도록 지시합니다.

다음 예에서는 프랜차이즈의 총 세계 박스오피스 수익과 시리즈에서 가장 높은 수익을 올린 영화를 비교하여 전 세계에서 가장 높은 수익을 올린 영화 프랜차이즈를 비교합니다. 기둥 차트와 XAxisOverlap 처음에는 1로 설정되므로 열이 서로 완전히 겹칩니다. 이 예에는 서로 다른 값의 역할을 확인할 수 있도록 겹침을 구성할 수 있는 슬라이더가 있습니다.

EXAMPLE

DATA

MODULES

RAZOR

CSS

using System;
using System.Collections.Generic;
public class HighestGrossingMoviesItem
{
    public string Franchise { get; set; }
    public double TotalRevenue { get; set; }
    public double HighestGrossing { get; set; }
}

public class HighestGrossingMovies
    : List<HighestGrossingMoviesItem>
{
    public HighestGrossingMovies()
    {
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Marvel Universe",
            TotalRevenue = 22.55,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Star Wars",
            TotalRevenue = 10.32,
            HighestGrossing = 2.07
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Harry Potter",
            TotalRevenue = 9.19,
            HighestGrossing = 1.34
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Avengers",
            TotalRevenue = 7.76,
            HighestGrossing = 2.8
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"Spider Man",
            TotalRevenue = 7.22,
            HighestGrossing = 1.28
        });
        this.Add(new HighestGrossingMoviesItem()
        {
            Franchise = @"James Bond",
            TotalRevenue = 7.12,
            HighestGrossing = 1.11
        });
    }
}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

        DescriptionType="CategoryChart"
        IsHorizontal="true"
        IsWrappingEnabled="true"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="XAxisOverlap"
            Name="XAxisOverlap"
            @ref="xAxisOverlap"
            Label="X Axis - Overlap"
            ShouldOverrideDefaultEditor="true"
            ValueType="PropertyEditorValueType.Slider"
            Min="0"
            Max="1"
            Step="0.1"
            PrimitiveValue="0">
            </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"
        DataSource="HighestGrossingMovies"
        ChartType="CategoryChartType.Column"
        CrosshairsSnapToData="true"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisInterval="1"
        XAxisOverlap="1">
        </IgbCategoryChart>

    </div>
</div>

@code {
    

    private Action BindElements { get; set; }

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

        this.BindElements = () => {
            propertyEditorPanel1.Target = this.chart;
        };
        this.BindElements();

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription xAxisOverlap;
    private IgbCategoryChart chart;

    private HighestGrossingMovies _highestGrossingMovies = null;
    public HighestGrossingMovies HighestGrossingMovies
    {
        get
        {
            if (_highestGrossingMovies == null)
            {
                _highestGrossingMovies = new HighestGrossingMovies();
            }
            return _highestGrossingMovies;
        }
    }

}razorコピー

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

Additional Resources

다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

• 축 눈금선
• 축 레이아웃

API References

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

IgbDataChart	IgbFinancialChart	IgbCategoryChart
Axes ➔ IgbNumericYAxis ➔ MaximumValue	YAxisMaximumValue	YAxisMaximumValue
Axes ➔ IgbNumericYAxis ➔ MinimumValue	YAxisMinimumValue	YAxisMinimumValue
Axes ➔ IgbNumericYAxis ➔ IsLogarithmic	YAxisIsLogarithmic	YAxisIsLogarithmic
Axes ➔ IgbNumericYAxis ➔ LogarithmBase	YAxisLogarithmBase	YAxisLogarithmBase
Axes ➔ IgbCategoryXAxis ➔ Gap	없음	XAxisGap
Axes ➔ IgbCategoryXAxis ➔ Overlap	없음	XAxisOverlap
Axes ➔ IgbTimeXAxis	XAxisMode	없음
Axes ➔ IgbPercentChangeYAxis	YAxisMode	없음
Axes ➔ IgbNumericYAxis ➔ labelSettings.angle	YAxisLabelAngle	YAxisLabelAngle
Axes ➔ IgbNumericXAxis ➔ labelSettings.angle	XAxisLabelAngle	XAxisLabelAngle
Axes ➔ IgbNumericYAxis ➔ labelSettings.textColor	YAxisLabelForeground	YAxisLabelForeground
Axes ➔ IgbNumericXAxis ➔ labelSettings.textColor	XAxisLabelForeground	XAxisLabelForeground
Axes ➔ IgbNumericYAxis ➔ labelSettings.visibility	YAxisLabelVisibility	YAxisLabelVisibility
Axes ➔ IgbNumericXAxis ➔ labelSettings.visibility	XAxisLabelVisibility	XAxisLabelVisibility