Las interacciones y anotaciones al pasar el cursor del gráfico Blazor se implementan a través de capas de interacción al pasar el cursor, que son series que se agregan a la colección de series. Estas capas dependen de la posición del cursor. Cada una de estas capas de anotaciones proporciona una interacción al pasar el cursor diferente que se puede usar de forma individual o combinada con otras para proporcionar interacciones al pasar el cursor potentes.
El siguiente ejemplo muestra las capas de anotación que están disponibles en el gráfico Blazor. Haga clic en las casillas de verificación para activar y desactivar cada capa.
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
/*
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.
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas Blazor completo y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Blazor Crosshair Layer
IgbCrosshairLayer se representa como líneas cruzadas que se cruzan en el valor real de cada serie a la que están configurados para apuntar y cada serie representa un conjunto de líneas separado.
Los tipos de punto de mira incluyen:
Horizontal
Vertical
Ambos
La mira del gráfico también se puede configurar para ajustarse a puntos de datos estableciendo la propiedad CrosshairsSnapToData en verdadero; de lo contrario, la mira se interpolará entre los puntos de datos. También se pueden habilitar anotaciones para mostrar el valor de la cruz a lo largo del eje.
Puede configurar la capa en forma de cruz para que la capa solo se muestre en una serie específica, ya que de forma predeterminada se enfocarán en todas las series en el control del gráfico. Para lograr esto, establezca la propiedad TargetSeries.
De forma predeterminada, el color de las líneas en forma de cruz es un color más claro que el de la serie con la que interactúa. Sin embargo, esta configuración predeterminada se puede anular para que pueda seleccionar un color que se utilizará para las líneas en forma de cruz. Esto se hace estableciendo la propiedad Brush de la capa en forma de cruz.
El siguiente ejemplo muestra cómo configurar la capa en forma de cruz pero apuntando a una sola serie, configurando el tipo en vertical y aplicando estilo al color del pincel.
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbLineSeriesModule),
typeof(IgbCrosshairLayerModule)
);
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
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="container vertical">@if (Data != null)
{<IgbDataChartHeight="100%"Width="100%"Subtitle="Renewable Energy Generated"><IgbCategoryXAxisName="xAxis"DataSource="Data"Label="Year" /><IgbNumericYAxisName="yAxis"Title="TWh"LabelLocation="AxisLabelsLocation.OutsideRight" /><IgbLineSeriesXAxisName="xAxis"YAxisName="yAxis"DataSource="Data"ValueMemberPath="USA" /><IgbCrosshairLayerHorizontalLineVisibility="Visibility.Collapsed"Brush="DodgerBlue" /></IgbDataChart>}</div></div>@code {private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Final Value Layer
IgbFinalValueLayer del control IgbDataChart proporciona una vista rápida a lo largo del eje del valor final mostrado en una serie.
Puede configurar esta anotación para apuntar a una serie específica si desea tener varias capas de valor final presentes con diferentes configuraciones. Esto se puede hacer configurando la propiedad TargetSeries.
También puede personalizar esta anotación configurando las siguientes propiedades:
AxisAnnotationBackground: esta propiedad se utiliza para elegir el pincel para el color de fondo de la anotación. El valor predeterminado es utilizar el pincel de serie.
AxisAnnotationTextColor: esta propiedad se utiliza para elegir el pincel para el color del texto de la anotación.
AxisAnnotationOutline: esta propiedad se utiliza para elegir el pincel para el color del contorno de la anotación.
El siguiente ejemplo demuestra cómo aplicar estilo a la anotación de la capa de valor final estableciendo las propiedades enumeradas anteriormente.
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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbLineSeriesModule),
typeof(IgbFinalValueLayerModule)
);
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
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="container vertical">@if (Data != null)
{<IgbDataChartHeight="100%"Width="100%"Subtitle="Renewable Energy Generated"><IgbCategoryXAxisName="xAxis"DataSource="Data"Label="Year" /><IgbNumericYAxisName="yAxis"Title="TWh"LabelLocation="AxisLabelsLocation.OutsideRight" /><IgbLineSeriesXAxisName="xAxis"YAxisName="yAxis"DataSource="Data"ValueMemberPath="USA" /><IgbFinalValueLayerAxisAnnotationBackground="Orange"AxisAnnotationTextColor="Black"AxisAnnotationOutline="Black"/></IgbDataChart>}</div></div>@code {private List<EnergyRenewableInfo> Data = new EnergyRenewableData();
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Blazor Callout Layer
IgbCalloutLayer muestra anotaciones de datos nuevos o existentes en el control del gráfico. Las anotaciones aparecen junto a los valores de datos dados en la fuente de datos.
Utilice las anotaciones de llamada para mostrar información adicional, como notas o detalles específicos sobre puntos de datos, que le gustaría señalar a sus usuarios.
Puede configurar las leyendas para que se dirijan a una serie específica si desea tener varias capas de leyendas presentes con diferentes configuraciones. Esto se puede hacer configurando la propiedad TargetSeries.
También puede personalizar esta anotación configurando las siguientes propiedades:
CalloutLeaderBrush: esta propiedad se utiliza para elegir el pincel para las líneas guía de las llamadas de la capa.
CalloutOutline: esta propiedad se utiliza para elegir el pincel para el color del contorno de la anotación.
CalloutBackground: esta propiedad se utiliza para elegir el pincel para el color de fondo de la anotación. El valor predeterminado es utilizar el pincel de serie.
CalloutTextColor: esta propiedad se utiliza para elegir el pincel para el color del texto de la anotación.
CalloutStrokeThickness: esta propiedad se utiliza para elegir el grosor del respaldo de la llamada.
CalloutCornerRadius: esta propiedad se utiliza para curvar las esquinas de las llamadas.
AllowedPositions: esta propiedad se utiliza para elegir qué posiciones puede usar la capa de llamada. p.ej. arriba, abajo
El siguiente ejemplo demuestra cómo aplicar estilo a las anotaciones de la capa de llamada estableciendo las propiedades enumeradas 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(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartAnnotationModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbAnnotationLayerProxyModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Renewable Electricity Generated
</div><divclass="container vertical fill"><IgbDataChartShouldAutoExpandMarginForInitialLabels="true"ComputedPlotAreaMarginMode="ComputedPlotAreaMarginMode.Series"Name="chart"
@ref="chart"><IgbCategoryXAxisName="xAxis"
@ref="xAxis"DataSource="CountryRenewableElectricity"Label="Year"></IgbCategoryXAxis><IgbNumericYAxisName="yAxis"
@ref="yAxis"Title="TWh"LabelLocation="AxisLabelsLocation.OutsideRight"></IgbNumericYAxis><IgbLineSeriesName="lineSeries1"
@ref="lineSeries1"XAxisName="xAxis"YAxisName="yAxis"DataSource="CountryRenewableElectricity"ValueMemberPath="America"Brush="#8961a9"MarkerOutline="#8961a9"ShouldHideAutoCallouts="false"></IgbLineSeries><IgbCalloutLayerName="CalloutLayer1"
@ref="calloutLayer1"IsAutoCalloutBehaviorEnabled="true"CalloutLeaderBrush="#8961a9"CalloutOutline="#8961a9"CalloutBackground="white"CalloutTextColor="#8961a9"CalloutStrokeThickness="1"CalloutCollisionMode="CalloutCollisionMode.Greedy"></IgbCalloutLayer></IgbDataChart></div></div>@code {protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var lineSeries1 = this.lineSeries1;
var calloutLayer1 = this.calloutLayer1;
}
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbLineSeries lineSeries1;
private IgbCalloutLayer calloutLayer1;
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
Timeline Styling
El siguiente ejemplo demuestra cómo diseñar el gráfico de datos como una línea de tiempo con anotaciones configurando las propiedades AllowedPositions enumeradas anteriormente:
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(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;
namespaceInfragistics.Samples
{
publicclassSampleTimelineData
{
publicstatic 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;
}
}
publicclassSampleTimelineItem
{
publicstring Details { get; set; }
publicint X { get; set; }
publicint Y { get; set; }
publicstring Year { get; set; }
public DateTime Date { get; set; }
}
}cs