Todas Ignite UI for Blazor incluyen la capacidad incorporada de modificar la apariencia de las líneas de los ejes, así como la frecuencia de las líneas de cuadrícula principales/secundarias y las marcas de graduación que se representan en los ejes X y Y.
the following examples can be applied to IgbCategoryChart as well as IgbFinancialChart controls.
Las líneas de cuadrícula del eje principal son líneas largas que se extienden horizontalmente a lo largo del eje Y o verticalmente a lo largo del eje X desde las ubicaciones de las etiquetas de los ejes y se representan en el área de trazado del gráfico. Las líneas de cuadrícula del eje menor son líneas que se representan entre las líneas de cuadrícula del eje mayor.
Las marcas de graduación de los ejes se muestran a lo largo de todos los ejes horizontales y verticales en cada etiqueta en todas las posiciones de línea principales del gráfico Blazor.
Este ejemplo muestra cómo configurar la línea de cuadrícula del eje para mostrar líneas de cuadrícula mayores y menores en intervalos específicos:
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassCountryRenewableElectricityItem
{
publicstring Year { get; set; }
publicdouble Europe { get; set; }
publicdouble China { get; set; }
publicdouble America { get; set; }
}
publicclassCountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
publicCountryRenewableElectricity()
{
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.
Blazor Axis Gridlines Properties
Establecer la propiedad de intervalo de eje especifica con qué frecuencia se representan las principales líneas de cuadrícula y etiquetas de eje en un eje. De manera similar, la propiedad de intervalo menor del eje especifica con qué frecuencia se representan las líneas de cuadrícula menores en un eje.
Para mostrar líneas de cuadrícula menores que corresponden a intervalos menores, debe configurar las propiedades XAxisMinorStroke y XAxisMinorStrokeThickness en el eje. Esto se debe a que las líneas de cuadrícula menores no tienen un color o grosor predeterminado y no se mostrarán sin asignarlas primero.
Puede personalizar cómo se muestran las líneas de cuadrícula en su gráfico Blazor configurando las siguientes propiedades:
Estas propiedades establecen el grosor en píxeles de una línea de eje.
Con respecto al intervalo mayor y menor en la tabla anterior, es importante tener en cuenta que el intervalo mayor para las etiquetas de los ejes también se establecerá según este valor, mostrando una etiqueta en el punto del eje asociado con el intervalo. Las líneas de la cuadrícula del intervalo menor siempre se representan entre las líneas de la cuadrícula principal y, como tal, las propiedades del intervalo menor siempre deben establecerse en algo mucho más pequeño (generalmente entre 2 y 5 veces más pequeño) que el valor de las propiedades del intervalo mayor.
En los ejes de categorías, los intervalos se representan como un índice entre el primer elemento y el último elemento de categoría. Generalmente, este valor debe ser igual al 10-20% del número total de elementos de categoría para el intervalo principal, de modo que todas las etiquetas de los ejes encajen en el eje y no queden recortadas por otras etiquetas de ejes. Para intervalos menores, esto se representa como una fracción de las propiedades del intervalo mayor. Este valor generalmente debe estar entre 0,25 y 0,5.
En los ejes numéricos, los valores del intervalo se representan como un doble entre el valor mínimo del eje y el valor máximo del eje. De forma predeterminada, los ejes numéricos calcularán automáticamente y encontrarán un intervalo agradable y redondo basado en los valores mínimos y máximos del eje.
En los ejes de fecha y hora, este valor se representa como un lapso de tiempo entre el valor mínimo del eje y el valor máximo del eje.
El siguiente ejemplo demuestra cómo personalizar las líneas de la cuadrícula configurando las propiedades anteriores:
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassCountryRenewableElectricityItem
{
publicstring Year { get; set; }
publicdouble Europe { get; set; }
publicdouble China { get; set; }
publicdouble America { get; set; }
}
publicclassCountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
publicCountryRenewableElectricity()
{
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Los ejes de IgbDataChart también tienen la capacidad de colocar una matriz de guiones en las líneas de cuadrícula mayor y menor utilizando las propiedades MajorStrokeDashArray y MinorStrokeDashArray, respectivamente. La línea del eje real también puede ser discontinua configurando la propiedad StrokeDashArray del eje correspondiente. Estas propiedades toman una serie de números que describirán la longitud de los guiones de las líneas de cuadrícula correspondientes.
El siguiente ejemplo demuestra un IgbDataChart con las propiedades de matriz de guiones establecidas anteriormente:
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassCountryRenewableElectricityItem
{
publicstring Year { get; set; }
publicdouble Europe { get; set; }
publicdouble China { get; set; }
publicdouble America { get; set; }
}
publicclassCountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
publicCountryRenewableElectricity()
{
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Axis Tickmarks Example
Las marcas de graduación del eje se habilitan estableciendo las propiedades XAxisTickLength y YAxisTickLength en un valor mayor que 0. Estas propiedades especifican la longitud de los segmentos de línea que forman las marcas de graduación.
Las marcas de graduación siempre se extienden desde la línea del eje y apuntan a la dirección de las etiquetas. Las etiquetas están compensadas por el valor de la longitud de las marcas para evitar superposiciones. Por ejemplo, con la propiedad YAxisTickLength establecida en 5, las etiquetas de los ejes se desplazarán hacia la izquierda en esa cantidad.
El siguiente ejemplo demuestra cómo personalizar las marcas configurando las propiedades anteriores:
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassCountryRenewableElectricityItem
{
publicstring Year { get; set; }
publicdouble Europe { get; set; }
publicdouble China { get; set; }
publicdouble America { get; set; }
}
publicclassCountryRenewableElectricity
: List<CountryRenewableElectricityItem>
{
publicCountryRenewableElectricity()
{
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 modulesnamespaceInfragistics.Samples
{
publicclassProgram
{
publicstaticasync 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