Blazor 축 레이아웃

모든 Ignite UI for Blazor 차트에는 위치와 같은 많은 축 레이아웃 옵션을 구성하는 옵션과 시리즈 간에 축을 공유하거나 동일한 차트에 여러 축을 두는 기능이 포함되어 있습니다. 이러한 기능은 아래에 제공된 예에서 설명합니다.

the following examples can be applied to IgbCategoryChart as well as IgbFinancialChart controls.

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

無料で試してみる

Axis Locations Example

모든 축에 대해 차트 플롯 영역과 관련하여 축 위치를 지정할 수 있습니다. Blazor 차트의 XAxisLabelLocation 속성을 사용하면 x축 선과 레이블을 플롯 영역 위나 아래에 배치할 수 있습니다. 마찬가지로 YAxisLabelLocation 속성을 사용하여 y축을 플롯 영역의 왼쪽이나 오른쪽에 배치할 수 있습니다.

다음 예에서는 2009년 이후 생산된 재생 가능 전기량을 선형 차트로 표시합니다. 차트 플롯 영역 내부 또는 외부의 왼쪽 또는 오른쪽에 레이블이 배치될 때 축이 어떻게 보이는지 시각화할 수 있도록 YAxisLabelLocation 구성할 수 있는 드롭다운이 있습니다.

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="false"
        Name="propertyEditorPanel1"
        @ref="propertyEditorPanel1">
            <IgbPropertyEditorPropertyDescription
            PropertyPath="YAxisLabelLocation"
            Name="YAxisLabelLocation"
            @ref="yAxisLabelLocation"
            Label="Y Axis - Label Location"
            PrimitiveValue="@("OutsideRight")">
            </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"
        ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"
        DataSource="CountryRenewableElectricity"
        IncludedProperties="@(new string[] { "Year", "Europe", "China", "America" })"
        ChartType="CategoryChartType.Line"
        YAxisTitle="Labels Location"
        IsHorizontalZoomEnabled="false"
        IsVerticalZoomEnabled="false"
        XAxisInterval="1"
        YAxisLabelLocation="YAxisLabelLocation.OutsideRight">
        </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 yAxisLabelLocation = this.yAxisLabelLocation;
        var chart = this.chart;

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

    }

    private IgbLegend legend;
    private IgbPropertyEditorPanel propertyEditorPanel1;
    private IgbPropertyEditorPropertyDescription yAxisLabelLocation;
    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 Advanced Scenarios

더욱 고급 축 레이아웃 시나리오의 경우 Blazor 데이터 차트 사용하여 축을 공유하고, 동일한 플롯 영역에 여러 y축 및/또는 x축을 추가하거나, 심지어 특정 값에서 축을 교차할 수 있습니다. 다음 예제는 IgbDataChart의 이러한 기능을 사용하는 방법을 보여줍니다.

Axis Sharing Example

Blazor IgbDataChart의 동일한 플롯 영역에서 여러 축을 공유하고 추가할 수 있습니다. IgbTimeXAxis 공유하고 여러 IgbNumericYAxis 추가하여 값 범위가 넓은(예: 주가 및 주식 거래량) 여러 데이터 소스를 플롯하는 것이 일반적인 시나리오입니다.

다음 예에서는 주식형 차트와 기둥 차트가 표시된 주식 가격 및 거래량 차트를 보여줍니다. 이 경우 왼쪽의 Y축은 기둥 차트에서 사용되고 오른쪽의 Y축은 주식형 차트에서 사용되며 X축은 두 축이 공유됩니다.

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(IgbDataChartCoreModule),
                typeof(IgbDataChartCategoryModule),
                typeof(IgbDataChartInteractivityModule),
                typeof(IgbFinancialPriceSeriesModule),
                typeof(IgbNumberAbbreviatorModule),
                typeof(IgbColumnSeriesModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

using System;
using System.Collections.Generic;

namespace Infragistics.Samples
{
    public class SharedAxisFinancialData
    {
        public static Random random = new Random();
        public static List<SharedAxisFinancialItem> Create(int itemsCount = 400)
        {
            var data = new List<SharedAxisFinancialItem>();

            // initial values
            var v = 10000.0;
            var o = 500.0;
            var h = Math.Round(o + (random.NextDouble() * 5));
            var l = Math.Round(o - (random.NextDouble() * 5));
            var c = Math.Round(l + (random.NextDouble() * (h - l)));

            var today = DateTime.Now;
            var end = new DateTime(today.Year, today.Month, today.Day);
            var time = end.AddDays(-itemsCount);

            for (var i = 0; i < itemsCount; i++)
            {
                var date = time.ToShortDateString();
                var label = GetShortDate(time, false);
                // adding new data item
                var item = new SharedAxisFinancialItem();
                item.Time = time;
                item.Date = date;
                item.Label = label;
                item.Close = c;
                item.Open = o;
                item.High = h;
                item.Low = l;
                item.Volume = v;
                data.Add(item);

                // generating new values
                var mod = random.NextDouble() - 0.49;
                o = Math.Round(o + (mod * 20));
                o = Math.Max(o, 500);
                o = Math.Min(o, 675);

                v = Math.Round(v + (mod * 500));
                h = Math.Round(o + (random.NextDouble() * 15));
                l = Math.Round(o - (random.NextDouble() * 15));
                c = Math.Round(l + (random.NextDouble() * (h - l)));
                time = time.AddDays(1);
            }
            return data;
        }

        public static string GetShortDate(DateTime dt, bool showYear)
        {
            var months = new List<string> {
                "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
            };
            var ind = dt.Month - 1;
            var day = dt.Day;
            var label = months[ind] + " " + day;
            if (showYear)
            {
                label += " " + dt.Year;
            }
            return label;
        }
    }

    public class SharedAxisFinancialItem
    {
        public double High { get; set; }
        public double Low { get; set; }
        public double Open { get; set; }
        public double Close { get; set; }
        public double Volume { get; set; }

        public string Label { get; set; }
        public string Date { get; set; }
        public DateTime Time { get; set; }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="container vertical">
        @if (Data != null)
        {
            <IgbDataChart Height="100%" Width="100%"
                       Subtitle="Stock Prices and Trade Volume"
                       SubtitleTopMargin="10"
                       IsHorizontalZoomEnabled="true"
                       IsVerticalZoomEnabled="true">
                <IgbCategoryXAxis Name="xAxisShared" Label="Label" Gap="0.75" DataSource="Data" />
                <IgbNumericYAxis Name="yAxisRight" LabelLocation="AxisLabelsLocation.OutsideRight"
                                 MinimumValue="400"
                                 MaximumValue="700" Title="Stock Price ($)" />
                <IgbNumericYAxis Name="yAxisLeft" LabelLocation="AxisLabelsLocation.OutsideLeft"
                                 MinimumValue="5000"
                                 MaximumValue="45000" Title="Trade Volume"
                                 MajorStrokeThickness="0"
                                 AbbreviateLargeNumbers="true" />

                <IgbColumnSeries XAxisName="xAxisShared"
                                 YAxisName="yAxisLeft"
                                 DataSource="Data"
                                 ValueMemberPath="Volume"
                                 ShowDefaultTooltip="true"
                                 Title="Trade Volume" />

                <IgbFinancialPriceSeries XAxisName="xAxisShared"
                                         YAxisName="yAxisRight"
                                         DisplayType="PriceDisplayType.Candlestick"
                                         DataSource="Data"
                                         HighMemberPath="High" LowMemberPath="Low" CloseMemberPath="Close" OpenMemberPath="Open"
                                         VolumeMemberPath="Volume"
                                         ShowDefaultTooltip="true"
                                         Title="Stock Price" />
            </IgbDataChart>
        }

    </div>
</div>

@code {

    private List<SharedAxisFinancialItem> Data;

    protected override void OnInitialized()
    {

        this.Data = SharedAxisFinancialData.Create();
    }
}razorコピー

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

Axis Crossing Example

Blazor IgbDataChart 플롯 영역 외부에 축을 배치하는 것 외에도 플롯 영역 내부에 축을 배치하고 특정 값에서 교차하도록 하는 옵션도 제공합니다. 예를 들어, x축과 y축 모두에 CrossingAxis 및 CrossingValue 속성을 설정하여 축 선과 축 레이블을 (0, 0) 원점에서 교차하도록 렌더링하여 삼각 차트를 만들 수 있습니다.

다음 예에서는 X축과 Y축이 (0, 0) 원점에서 서로 교차하는 분산 스플라인 차트로 표현되는 Sin 및 Cos 파동을 보여줍니다.

EXAMPLE

MODULES

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(IgbDataChartCoreModule),
                typeof(IgbDataChartScatterModule),
                typeof(IgbDataChartScatterCoreModule),
                typeof(IgbDataChartInteractivityModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csコピー

@using IgniteUI.Blazor.Controls

<div class="container vertical">
    <div class="options horizontal">
        <label>X-Axis Crossing Value:  </label>
        <label class="options-value" >@XAxisCrossingValue</label>
        <input type="range" min="-360" max="360" step="10" value="0" @oninput="OnXAxisCrossingValueChanged" />
        <label>Y-Axis Crossing Value:  </label>
        <label class="options-value" >@YAxisCrossingValue</label>
        <input type="range" min="-1.25" max="1.25" step="0.125" value="0" @oninput="OnYAxisCrossingValueChanged" />
    </div>
    <div class="container vertical">
        @if (SinData != null && CosData != null)
        {
        <IgbDataChart Height="100%" Width="100%" IsVerticalZoomEnabled="true" IsHorizontalZoomEnabled="true"
                   PlotAreaMarginTop="60" PlotAreaMarginBottom="60"
                   PlotAreaMarginLeft="30" PlotAreaMarginRight="30">
            <IgbNumericXAxis Name="xAxis" Interval="40" MinimumValue="-360" MaximumValue="360"
                          LabelLocation="AxisLabelsLocation.InsideBottom"
                          LabelTopMargin="10"
                          CrossingAxisName="yAxis"
                          CrossingValue="@YAxisCrossingValue"
                          StrokeThickness="1" Stroke="black"/>
            <IgbNumericYAxis Name="yAxis" MinimumValue="-1.25" MaximumValue="1.25" Interval="0.25"
                          LabelLocation="AxisLabelsLocation.InsideLeft"
                          LabelRightMargin="10"
                          CrossingAxisName="xAxis"
                          CrossingValue="@XAxisCrossingValue"
                          StrokeThickness="1" Stroke="black"/>

            <IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="SinData"
                                 XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
            <IgbScatterSplineSeries XAxisName="xAxis" YAxisName="yAxis" DataSource="CosData"
                                 XMemberPath="X" YMemberPath="Y" MarkerType="MarkerType.Circle" />
        </IgbDataChart>
        }
    </div>
</div>

@code {

    private List<Point> SinData;
    private List<Point> CosData;

    private double YAxisCrossingValue = 0;
    private double XAxisCrossingValue = 0;

    protected override void OnInitialized()
    {

        List<Point> _sinData = new List<Point>();
        List<Point> _cosData = new List<Point>();

        for (int i = - 360; i <= 360; i += 10)
        {
            double radians = (i * Math.PI) / 180;
            double sin = Math.Sin(radians);
            double cos = Math.Cos(radians);

            _sinData.Add(new Point() { X = i, Y = sin });
            _cosData.Add(new Point() { X = i, Y = cos });
        }

        this.SinData = _sinData;
        this.CosData = _cosData;
    }

    private void OnXAxisCrossingValueChanged(ChangeEventArgs args)
    {
        this.XAxisCrossingValue = double.Parse(args.Value.ToString());
    }

    private void OnYAxisCrossingValueChanged(ChangeEventArgs args)
    {
        this.YAxisCrossingValue = double.Parse(args.Value.ToString());
    }
}razorコピー

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

Axis Timeline Example

다음 예에서는 IgbTimeXAxis 타임라인으로 사용하여 데이터 차트의 스타일을 지정하는 방법을 보여줍니다.

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

Additional Resources

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

• 축 눈금선
• 축 옵션

API References

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

IgbDataChart	IgbCategoryChart
Axes ➔ IgbNumericYAxis ➔ CrossingAxis	없음
Axes ➔ IgbNumericYAxis ➔ CrossingValue	없음
Axes ➔ IgbNumericXAxis ➔ IsInverted	XAxisInverted
Axes ➔ IgbNumericYAxis ➔ IsInverted	YAxisInverted
Axes ➔ IgbNumericYAxis ➔ LabelLocation	YAxisLabelLocation
Axes ➔ IgbNumericXAxis ➔ LabelLocation	XAxisLabelLocation
Axes ➔ IgbNumericYAxis ➔ LabelHorizontalAlignment	YAxisLabelHorizontalAlignment
Axes ➔ IgbNumericXAxis ➔ LabelVerticalAlignment	XAxisLabelVerticalAlignment
Axes ➔ IgbNumericYAxis ➔ LabelVisibility	YAxisLabelVisibility
Axes ➔ IgbNumericXAxis ➔ LabelVisibility	XAxisLabelVisibility