Blazor 軸レイアウト

すべての Ignite UI for Blazor チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。

次の例は、IgbCategoryChart および IgbFinancialChart コントロールに適用されます。

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

無料で試してみる

軸位置の例

すべての軸に対して、チャートのプロット領域に関連して軸の位置を指定できます。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コピー

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

軸の高度なシナリオ

より高度な軸レイアウト シナリオでは、Blazor データ チャートを使用して軸を共有したり、同じプロット領域に複数の y 軸や x 軸を追加したり、特定の値で軸を交差させたりすることができます。次の例は、IgbDataChart のこれらの機能の使用方法を示しています。

軸共有の例

Blazor IgbDataChart の同じプロット領域に複数の軸を共有して追加できます。IgbTimeXAxis を共有し、複数の IgbNumericYAxis を追加して、さまざまな値 (株価や株取引量など) を持つ多くのデータ ソースをプロットするのが一般的なシナリオです。

以下の例は、株価チャートと縦棒チャートをプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は縦棒チャートで使用され、右側の Y 軸は株価チャート、X 軸は 2 つの間で共有されます。

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

軸交差の例

軸をプロット領域の外側に配置することに加えて、Blazor IgbDataChart は、軸をプロット領域の内側に配置し、特定の値で交差させるオプションも提供します。たとえば、x 軸と y 軸の両方で CrossingAxis プロパティと CrossingValue プロパティを設定して、原点が (0、0) で 交差するように軸線と軸ラベルを描画することにより、三角関数チャートを作成できます。

以下の例は、散布スプライン チャートで表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。

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

軸タイムラインの例

次の例は、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コピー

その他のリソース

関連するチャート機能の詳細については、以下のトピックを参照してください。

• 軸グリッド線
• 軸オプション

API リファレンス

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

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