Opciones del eje Blazor

En todos los gráficos Ignite UI for Blazor, los ejes proporcionan propiedades para configuraciones visuales, como títulos, etiquetas y rangos. Estas funciones se muestran en los ejemplos que se proporcionan a continuación.

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

無料で試してみる

Axis Titles Example

La función de títulos de los ejes de los gráficos Blazor le permite agregar información contextual a su gráfico. Puede personalizar la apariencia de los títulos de los ejes de muchas maneras diferentes, como aplicar diferentes estilos de fuente, colores, márgenes y alineaciones.

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

Los gráficos Blazor le permiten tener un control total sobre la configuración, el formato y el estilo de la fuente de las etiquetas que se muestran en un eje de su gráfico. Puede cambiar el ángulo de rotación, el margen, la alineación horizontal y vertical, el color, el relleno y la visibilidad de las etiquetas de los ejes. El siguiente ejemplo muestra cómo utilizar estas funciones de los ejes.

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

Los ejes del gráfico tienen la capacidad de realizar un cálculo mejorado con respecto a la cantidad de espacio disponible para las etiquetas del eje propietario. Este cálculo mejorado permite que el eje optimice la cantidad de espacio que se le asigna para mostrar más etiquetas para el eje dado.

Este cálculo mejorado es algo que usted debe aceptar, lo cual puede hacer estableciendo la propiedad UseEnhancedIntervalManagement en verdadero. Luego, si prefiere mostrar tantas etiquetas como puedan caber en las dimensiones del eje sin configurar manualmente la propiedad Interval del eje, puede establecer la propiedad EnhancedIntervalPreferMoreCategoryLabels en el eje en verdadero.

El gráfico también tiene la capacidad de considerar la rotación automática de las etiquetas si no caben en el espacio asignado, así como la capacidad de aplicar un margen automático al área del trazado para garantizar que las etiquetas puedan caber. Esto es algo que se puede optar inicialmente configurando primero la propiedad AutoMarginAndAngleUpdateMode en el gráfico en SizeChanging o SizeChangingAndZoom. Esto le indicará al gráfico cuándo reevaluar el margen automático y el ángulo aplicado a las etiquetas, si lo desea.

Después de configurar AutoMarginAndAngleUpdateMode, puede establecer la propiedad ShouldAutoExpandMarginForInitialLabels en verdadero para optar por el margen automático o establecer la propiedad ShouldConsiderAutoRotationForInitialLabels en verdadero para la rotación automática. También puede personalizar aún más el margen automático que se aplica configurando AutoExpandMarginExtraPadding y AutoExpandMarginMaximumValue para proporcionar espacio adicional o un margen máximo posible, respectivamente.

Los formatos de etiqueta personalizados, como IgbNumberFormatSpecifier y IgbDateTimeFormatSpecifier se pueden agregar a cada eje a través de las XAxisLabelFormatSpecifier colecciones y YAxisLabelFormatSpecifier. Se usa normalmente para aplicar el formato de número, fecha y hora confidencial del lenguaje Intl.NumberFormat e Intl.DateTimeFormat. Para que se aplique un formato personalizado a las etiquetas, el o XAxisLabelFormat debe establecerse en el YAxisLabelFormat nombre de la propiedad del elemento de datos en el IgbCategoryChart, por ejemplo. {Date} Para el IgbFinancialChart el número es el contexto porque utiliza un eje numérico, por lo tanto, debe establecerse en {0}.

El siguiente ejemplo formatea el eje y con un IgbNumberFormatSpecifier para representar los precios en dólares estadounidenses de las películas más taquilleras de los Estados Unidos.

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

En los gráficos Blazor, puedes definir un valor mínimo y máximo de rango para un eje numérico o de tiempo. El mínimo del rango es el valor más bajo del eje y el máximo del rango es el valor más alto del eje. Estos valores se establecen configurando las opciones YAxisMinimumValue y YAxisMaximumValue.

De forma predeterminada, los gráficos calcularán los valores mínimo y máximo para el rango del eje numérico y de tiempo en función de los puntos de valor correspondientes más bajo y más alto de sus datos, pero este cálculo automático puede no ser apropiado para su conjunto de puntos de datos en todos los casos. Por ejemplo, si sus datos tienen un valor mínimo de 850, es posible que desee establecer YAxisMinimumValue en 800 para que haya un valor de espacio de 50 entre el eje mínimo y el valor más bajo de los puntos de datos. La misma idea se puede aplicar al valor mínimo del eje y al valor más alto de los puntos de datos utilizando la propiedad 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

En los controles IgbFinancialChart e IgbCategoryChart, puede elegir si sus datos se trazan en escala logarítmica a lo largo del eje y cuando la propiedad YAxisIsLogarithmic está establecida en verdadero o en escala lineal cuando esta propiedad está establecida en falso (valor predeterminado). Con la propiedad YAxisLogarithmBase, puede cambiar la base de la escala logarítmica del valor predeterminado de 10 a otro valor entero.

El control y el IgbFinancialChart le permiten elegir cómo se representan sus datos a lo largo del eje y utilizando la propiedad YAxisMode que proporciona los modos Numeric y PercentChange. El modo Numeric trazará datos con los valores exactos, mientras que el modo PercentChange mostrará los datos como cambio porcentual en relación con el primer punto de datos proporcionado. El valor predeterminado es el modo Numeric.

Además de la propiedad YAxisMode, el control IgbFinancialChart tiene la propiedad XAxisMode que proporciona modos Time y Ordinal para el eje x. El modo Time mostrará espacio a lo largo del eje x para las lagunas en los datos (por ejemplo, no se negocian acciones los fines de semana o días festivos). El modo Ordinal colapsará las áreas de fechas donde no existen datos. El valor predeterminado es el modo 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

La propiedad XAxisGap de los gráficos Blazor determina la cantidad de espacio entre las columnas o barras de las series representadas. Esta propiedad acepta un valor numérico entre 0,0 y 1,0. El valor representa un ancho relativo del espacio entre la cantidad de píxeles disponibles entre las series. Si se establece esta propiedad en 0, no se representará ningún espacio entre las series y, si se establece en 1, se representará el espacio máximo disponible.

La propiedad XAxisMaximumGap de los gráficos Blazor determina el valor máximo de espacio que se permite. Este valor predeterminado está establecido en 1,0, pero se puede cambiar según el valor que se establezca en XAxisGap.

La propiedad XAxisMinimumGapSize de los gráficos Blazor determina la cantidad mínima de píxeles a utilizar para el espacio entre las categorías, si es posible.

El siguiente ejemplo muestra la temperatura máxima promedio en grados Celsius en el Central Park de la ciudad de Nueva York representada por un Gráfico de columnas con un XAxisGap inicialmente establecido en 1, por lo que habrá un ancho de categoría completo entre las columnas. Hay un control deslizante que le permite configurar el espacio en este ejemplo para que pueda ver qué hacen los diferentes valores.

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

La propiedad XAxisOverlap de los gráficos Blazor permite configurar la superposición de las columnas o barras representadas de las series representadas. Esta propiedad acepta un valor numérico entre -1,0 y 1,0. El valor representa una superposición relativa de la cantidad disponible de píxeles dedicados a cada serie. Si se configura esta propiedad con un valor negativo (hasta -1,0), las categorías se alejan unas de otras, lo que genera un espacio entre ellas. Por el contrario, si se configura esta propiedad con un valor positivo (hasta 1,0), las categorías se superponen entre sí. Un valor de 1 indica al gráfico que represente las categorías una encima de otra.

El siguiente ejemplo muestra una comparación de las franquicias cinematográficas más taquilleras a nivel mundial comparadas con los ingresos totales de taquilla mundial de la franquicia y la película más taquillera de la serie, representadas por un Gráfico de columnas con XAxisOverlap inicialmente establecido en 1, por lo que las columnas se superpondrán completamente entre sí. Hay un control deslizante que le permite configurar la superposición en este ejemplo para que pueda ver qué hacen los diferentes valores.

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

Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:

• Líneas de cuadrícula del eje
• Diseño de eje

API References

La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

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	Ninguno	XAxisGap
Axes ➔ IgbCategoryXAxis ➔ Overlap	Ninguno	XAxisOverlap
Axes ➔ IgbTimeXAxis	XAxisMode	Ninguno
Axes ➔ IgbPercentChangeYAxis	YAxisMode	Ninguno
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