Las animaciones le permiten facilitar la serie a medida que carga una nueva fuente de datos. La animación disponible difiere según el tipo de serie de que se trate. Por ejemplo, la serie de columnas se anima al elevarse desde el eje x, una serie de líneas se anima al dibujar desde el origen del eje y.
Las animaciones están deshabilitadas en la Ignite UI for Blazor, pero se pueden habilitar configurando la propiedad IsTransitionInEnabled en verdadero. Desde allí, puede configurar la propiedad TransitionInDuration para determinar cuánto tiempo debe tardar la animación en completarse y TransitionInMode para determinar el tipo de animación que se lleva a cabo.
El siguiente ejemplo muestra un Gráfico de líneas con una animación configurada en el TransitionInMode predeterminado: "Auto". El menú desplegable y el control deslizante en la parte superior de este ejemplo le permitirán modificar TransitionInMode y TransitionInDuration, respectivamente, para que pueda ver cómo se ven las diferentes animaciones admitidas a diferentes velocidades.
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 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(IgbInputModule),
typeof(IgbPropertyEditorPanelModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespaceInfragistics.Samples
{
publicclassEnergyRenewableInfo
{
publicstring Year { get; set; }
publicint Europe { get; set; }
publicint China { get; set; }
publicint USA { get; set; }
}
publicclassEnergyRenewableData : List<EnergyRenewableInfo>
{
publicEnergyRenewableData()
{
Add(new EnergyRenewableInfo() { Year = "2009", Europe = 31, China = 21, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2010", Europe = 43, China = 26, USA = 24 });
Add(new EnergyRenewableInfo() { Year = "2011", Europe = 66, China = 29, USA = 28 });
Add(new EnergyRenewableInfo() { Year = "2012", Europe = 69, China = 32, USA = 26 });
Add(new EnergyRenewableInfo() { Year = "2013", Europe = 58, China = 47, USA = 38 });
Add(new EnergyRenewableInfo() { Year = "2014", Europe = 40, China = 46, USA = 31 });
Add(new EnergyRenewableInfo() { Year = "2015", Europe = 78, China = 50, USA = 19 });
Add(new EnergyRenewableInfo() { Year = "2016", Europe = 13, China = 90, USA = 52 });
Add(new EnergyRenewableInfo() { Year = "2017", Europe = 78, China = 132, USA = 50 });
Add(new EnergyRenewableInfo() { Year = "2018", Europe = 40, China = 134, USA = 34 });
Add(new EnergyRenewableInfo() { Year = "2019", Europe = 80, China = 96, USA = 38 });
}
}
}cs
