En Ignite UI for Blazor, es una versión altamente personalizable de la Legend, que muestra los valores de las series y proporciona muchas propiedades de configuración para filtrar las filas de las series y las columnas de valores, el estilo y el IgbDataLegend formato de los valores. Esta leyenda se actualiza al mover el ratón dentro del área de la trama de la IgbCategoryChart, IgbFinancialChart, y IgbDataChart. Además, tiene un estado persistente que recuerda el último punto en el que se mantiene el puntero del ratón del usuario fuera del área de trazado. Muestra este contenido mediante un conjunto de tres tipos de filas (encabezado, serie, resumen) y cuatro tipos de columnas (título, etiqueta, valor, unidad).
Las filas de IgbDataLegend incluyen la fila de encabezado, las filas de la serie y la fila de resumen. La fila del encabezado muestra la etiqueta del eje del punto sobre el que se desplaza y se puede cambiar usando la propiedad HeaderText.
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(IgbDataLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><IgbDataLegendName="legend"
@ref="legend"UnitsText="B"></IgbDataLegend></div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"CrosshairsSnapToData="true"></IgbCategoryChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
legend.Target = this.chart;
};
this.BindElements();
}
private IgbDataLegend legend;
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
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Blazor completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Fila de encabezado
La fila del encabezado muestra la etiqueta actual del eje x al pasar el mouse sobre series de categorías y series financieras. Puede usar las propiedades HeaderFormatDate y HeaderFormatTime para formatear la fecha y la hora en IgbDataLegend si el eje x muestra fechas. Para otros tipos de series, IgbDataLegend no representa la fila del encabezado.
Fila de serie
La fila de la serie representa cada serie trazada en el gráfico. Estas filas mostrarán la insignia de leyenda, el título de la serie, el valor real/abreviado de la serie y el símbolo de abreviatura o unidad de medida, si se especifica. Puede filtrar filas de series configurando las propiedades de IncludedSeries o ExcludedSeries en una colección de índices de series (1, 2, 3) o títulos de series (Tesla, Microsoft).
Fila de resumen
Finalmente, hay una fila de resumen que muestra el total de todos los valores de la serie. El título del resumen predeterminado se puede cambiar utilizando la propiedad SummaryTitleText de la leyenda. Además, puede utilizar la propiedad SummaryType para personalizar si muestra los valores Total, Min, Max o Average de la serie en la fila de resumen.
Columnas de leyenda de datos Blazor
Las columnas de IgbDataLegend incluyen el título de la serie, la etiqueta, el valor de la columna de datos y la unidad opcional asociada con el valor. Algunas series del gráfico pueden tener varias columnas para etiqueta, valor y unidades. Por ejemplo, las series de precios financieros tienen columnas de datos Alto, Bajo, Abierto y Cerrado que se pueden filtrar en IgbDataLegend usando las propiedades IncludedColumns o ExcludedColumns.
EXAMPLE
DATA
MODULES
RAZOR
CSS
//begin async datausing System;
using System.Collections.Generic;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Net.Http;
using System.Collections.ObjectModel;
using IgniteUI.Blazor.Controls;
publicclassMultipleStocks : List<TitledStockData>
{
publicasyncstatic Task<MultipleStocks> Fetch()
{
var google = await MultipleStocks.GetGoogleStock();
var amazon = await MultipleStocks.GetAmazonStock();
var val = new MultipleStocks();
val.Add(google);
val.Add(amazon);
return val;
}
/** gets Amazon stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Amazon";
return stockData;
}
/** gets Tesla stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Tesla";
return stockData;
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Microsoft";
return stockData;
}
/** gets Google stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Google";
return stockData;
}
privateasyncstatic Task<Dictionary<string, object>[]> Fetch(string url)
{
HttpClient client = new HttpClient();
var str = await client.GetStringAsync(url);
var arr = JsonSerializer.Deserialize<Dictionary<string, object>[]>(str);
return arr;
}
publicstatic TitledStockData ConvertData(Dictionary<string, object>[] arr)
{
var ret = new TitledStockData();
foreach (var json in arr)
{
var date = ((JsonElement)json["date"]).GetString();
var parts = date.Split('-'); // "2020-01-01"var item = new MultipleStocksItem();
item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]));
item.Open = ((JsonElement)json["open"]).GetDouble();
item.High = ((JsonElement)json["high"]).GetDouble();
item.Low = ((JsonElement)json["low"]).GetDouble();
item.Close = ((JsonElement)json["close"]).GetDouble();
item.Volume = ((JsonElement)json["volume"]).GetDouble();
ret.Add(item);
}
return ret;
}
}
publicclassMultipleStocksItem
{
[DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)]
publicstring Title { get; set; }
public DateTime Date { get; set; }
publicdouble Open { get; set; }
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
}
publicclassTitledStockData
: ObservableCollection<MultipleStocksItem>
{
}
//end async datacs
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(IgbFinancialChartModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataLegendModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
La configuración de valores en las propiedades IncludedColumns y ExcludedColumns depende del tipo de serie y de cuántas columnas de datos admiten. Por ejemplo, puede establecer la propiedad IncludedColumns en una colección de cadenas de apertura y cierre y la leyenda mostrará solo los valores de apertura y cierre de los precios de las acciones cuando el gráfico represente series financieras. La siguiente tabla enumera todos los nombres de columnas que se pueden usar para filtrar columnas en la leyenda de datos.
Donde el precio típico y el cambio porcentual de los precios de OHLC se calculan automáticamente por series financieras, por lo que no es necesario incluirlos en sus fuentes de datos.
Columna de título
La columna de título muestra insignias de leyenda y títulos de series, que provienen de la propiedad Title de las diferentes IgbSeries trazadas en el gráfico.
Columna de etiqueta
La columna de etiqueta muestra un nombre corto en el lado izquierdo de la columna de valor, por ejemplo, "O" para el precio de las acciones abiertas. Puede alternar la visibilidad de esta columna utilizando la propiedad LabelDisplayMode.
Columna de valor
La columna de valores muestra los valores de las series como texto abreviado que se puede formatear usando la propiedad ValueFormatAbbreviation para aplicar la misma abreviatura a todos los números estableciendo esta propiedad en Shared. Alternativamente, un usuario puede seleccionar otras abreviaturas como Independent, Kilo, Million, etc. La precisión de los valores abreviados se controla utilizando ValueFormatMinFractions y ValueFormatMaxFractions para los dígitos mínimo y máximo, respectivamente.
Columna de unidad
La columna de unidades muestra un símbolo de abreviatura en el lado derecho de la columna de valores. El símbolo de la unidad depende de la propiedad ValueFormatAbbreviation, por ejemplo, "M" para la abreviatura Million.
Personalización de columnas
Puede personalizar el texto que se muestra en las columnas Etiqueta y Unidad usando propiedades que terminan en MemberAsLegendLabel y MemberAsLegendUnit en cada serie. La siguiente tabla muestra algunas posibles personalizaciones de las columnas Etiqueta y Unidad.
Además, puede utilizar la propiedad UnitText en IgbDataLegend para cambiar el texto que se muestra en todas las columnas de Unidad.
Estilo de leyenda de datos Blazor
IgbDataLegend proporciona propiedades para diseñar cada tipo de columna. Cada una de estas propiedades comienza con Título, Etiqueta, Valor o Unidades. Puede diseñar el color, la fuente y el margen del texto. Por ejemplo, si quisiera establecer el color del texto de todas las columnas, establecería las propiedades TitleTextColor, LabelTextColor, ValueTextColor y UnitsTextColor. El siguiente ejemplo demuestra una utilización de las propiedades de estilo mencionadas anteriormente:
EXAMPLE
Formato de valores de leyenda de datos Blazor
IgbDataLegend proporciona abreviatura automática de números grandes utilizando su propiedad ValueFormatAbbreviation. Esto agrega un multiplicador en la columna de unidades, como kilo, millón, mil millones, etc. Puede personalizar la cantidad de dígitos fraccionarios que se muestran configurando ValueFormatMinFractions y ValueFormatMaxFractions. Esto le permitirá determinar el número mínimo y máximo de dígitos que aparecen después del punto decimal, respectivamente. El siguiente ejemplo demuestra cómo utilizar esas propiedades:
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(IgbDataLegendModule),
typeof(IgbCategoryChartModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><IgbDataLegendName="legend"
@ref="legend"ValueFormatMode="DataLegendValueMode.Decimal"ValueFormatMinFractions="1"UnitsText="B"></IgbDataLegend></div><divclass="container vertical fill"><IgbCategoryChartName="chart"
@ref="chart"ChartType="CategoryChartType.Column"DataSource="HighestGrossingMovies"XAxisInterval="1"YAxisTitle="Billions of U.S. Dollars"YAxisTitleLeftMargin="10"YAxisTitleRightMargin="5"YAxisLabelLeftMargin="0"IsHorizontalZoomEnabled="false"IsVerticalZoomEnabled="false"ToolTipType="ToolTipType.None"CrosshairsDisplayMode="CrosshairsDisplayMode.None"IsCategoryHighlightingEnabled="true"></IgbCategoryChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
this.BindElements = () => {
legend.Target = this.chart;
};
this.BindElements();
}
private IgbDataLegend legend;
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
Modo de valor de leyenda de datos Blazor
Tiene la posibilidad de cambiar la visualización decimal predeterminada de los valores dentro de IgbDataLegend a una moneda cambiando la propiedad ValueFormatMode. Además, puede cambiar la cultura del símbolo de moneda mostrado configurando la propiedad ValueFormatCulture como una etiqueta cultural. Por ejemplo, la siguiente leyenda de datos de ejemplo con ValueFormatCulture establecida en "en-GB" para mostrar el símbolo de libras esterlinas (£):
EXAMPLE
DATA
MODULES
RAZOR
CSS
//begin async datausing System;
using System.Collections.Generic;
using System.Text.Json;
using System.Threading;
using System.Threading.Tasks;
using System.Net.Http;
using System.Collections.ObjectModel;
using IgniteUI.Blazor.Controls;
publicclassMultipleStocks : List<TitledStockData>
{
publicasyncstatic Task<MultipleStocks> Fetch()
{
var google = await MultipleStocks.GetGoogleStock();
var amazon = await MultipleStocks.GetAmazonStock();
var val = new MultipleStocks();
val.Add(google);
val.Add(amazon);
return val;
}
/** gets Amazon stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetAmazonStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Amazon";
return stockData;
}
/** gets Tesla stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetTeslaStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Tesla";
return stockData;
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetMicrosoftStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Microsoft";
return stockData;
}
/** gets Google stock OHLC prices from a .JSON file */publicasyncstatic Task<TitledStockData> GetGoogleStock()
{
var url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
var data = await Fetch(url);
var stockData = ConvertData(data);
stockData[0].Title = "Google";
return stockData;
}
privateasyncstatic Task<Dictionary<string, object>[]> Fetch(string url)
{
HttpClient client = new HttpClient();
var str = await client.GetStringAsync(url);
var arr = JsonSerializer.Deserialize<Dictionary<string, object>[]>(str);
return arr;
}
publicstatic TitledStockData ConvertData(Dictionary<string, object>[] arr)
{
var ret = new TitledStockData();
foreach (var json in arr)
{
var date = ((JsonElement)json["date"]).GetString();
var parts = date.Split('-'); // "2020-01-01"var item = new MultipleStocksItem();
item.Date = new DateTime(int.Parse(parts[0]), int.Parse(parts[1]) + 1, int.Parse(parts[2]));
item.Open = ((JsonElement)json["open"]).GetDouble();
item.High = ((JsonElement)json["high"]).GetDouble();
item.Low = ((JsonElement)json["low"]).GetDouble();
item.Close = ((JsonElement)json["close"]).GetDouble();
item.Volume = ((JsonElement)json["volume"]).GetDouble();
ret.Add(item);
}
return ret;
}
}
publicclassMultipleStocksItem
{
[DataSeriesMemberIntent(DataSeriesIntent.SeriesTitle)]
publicstring Title { get; set; }
public DateTime Date { get; set; }
publicdouble Open { get; set; }
publicdouble High { get; set; }
publicdouble Low { get; set; }
publicdouble Close { get; set; }
publicdouble Volume { get; set; }
}
publicclassTitledStockData
: ObservableCollection<MultipleStocksItem>
{
}
//end async datacs
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(IgbFinancialChartModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataLegendModule)
);
await builder.Build().RunAsync();
}
}
}cs
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Agrupamiento de leyendas de datos Blazor
DataLegendGroup se puede establecer, en todos los tipos de series, en una cadena que categorizará un grupo de series en Data Legend. Cada grupo tendrá su propia fila de resumen antes de que se muestre otro grupo de series: De forma predeterminada, DataLegend ocultará los nombres de los grupos, pero puede mostrar los nombres de los grupos estableciendo la GroupRowVisible propiedad en true.
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassOlympicMedalsTopCountriesWithTotalsItem
{
publicstring Year { get; set; }
publicdouble America { get; set; }
publicdouble AmericaGold { get; set; }
publicdouble China { get; set; }
publicdouble ChinaGold { get; set; }
publicdouble Russia { get; set; }
publicdouble RussiaGold { get; set; }
publicdouble Total { get; set; }
}
publicclassOlympicMedalsTopCountriesWithTotals
: List<OlympicMedalsTopCountriesWithTotalsItem>
{
publicOlympicMedalsTopCountriesWithTotals()
{
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"1996",
America = 148,
AmericaGold = 50,
China = 110,
ChinaGold = 40,
Russia = 95,
RussiaGold = 20,
Total = 353
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2000",
America = 142,
AmericaGold = 40,
China = 115,
ChinaGold = 45,
Russia = 91,
RussiaGold = 40,
Total = 348
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2004",
America = 134,
AmericaGold = 35,
China = 121,
ChinaGold = 55,
Russia = 86,
RussiaGold = 25,
Total = 341
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2008",
America = 131,
AmericaGold = 20,
China = 129,
ChinaGold = 35,
Russia = 65,
RussiaGold = 35,
Total = 325
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2012",
America = 135,
AmericaGold = 25,
China = 115,
ChinaGold = 50,
Russia = 77,
RussiaGold = 15,
Total = 327
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2016",
America = 146,
AmericaGold = 45,
China = 112,
ChinaGold = 45,
Russia = 88,
RussiaGold = 30,
Total = 346
});
}
}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(IgbLegendModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataLegendModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs
@using IgniteUI.Blazor.Controls<divclass="container vertical"><divclass="legend"><IgbDataLegendName="legend"
@ref="legend"GroupRowVisible="true"></IgbDataLegend></div><divclass="container vertical fill"><IgbDataChartName="chart"
@ref="chart"><IgbCategoryXAxisName="xAxis"
@ref="xAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Label="Year"></IgbCategoryXAxis><IgbNumericYAxisName="yAxis"
@ref="yAxis"></IgbNumericYAxis><IgbColumnSeriesName="ColumnSeries1"
@ref="columnSeries1"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="America"ValueMemberPath="America"DataLegendGroup="Medals by Country"></IgbColumnSeries><IgbColumnSeriesName="ColumnSeries2"
@ref="columnSeries2"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="China"ValueMemberPath="China"DataLegendGroup="Medals by Country"></IgbColumnSeries><IgbColumnSeriesName="ColumnSeries3"
@ref="columnSeries3"XAxisName="xAxis"YAxisName="yAxis"DataSource="OlympicMedalsTopCountriesWithTotals"Title="Russia"ValueMemberPath="Russia"DataLegendGroup="Medals by Country"></IgbColumnSeries></IgbDataChart></div></div>@code {private Action BindElements { get; set; }
protectedoverrideasync Task OnAfterRenderAsync(bool firstRender)
{
var legend = this.legend;
var chart = this.chart;
var xAxis = this.xAxis;
var yAxis = this.yAxis;
var columnSeries1 = this.columnSeries1;
var columnSeries2 = this.columnSeries2;
var columnSeries3 = this.columnSeries3;
this.BindElements = () => {
legend.Target = this.chart;
};
this.BindElements();
}
private IgbDataLegend legend;
private IgbDataChart chart;
private IgbCategoryXAxis xAxis;
private IgbNumericYAxis yAxis;
private IgbColumnSeries columnSeries1;
private IgbColumnSeries columnSeries2;
private IgbColumnSeries columnSeries3;
private OlympicMedalsTopCountriesWithTotals _olympicMedalsTopCountriesWithTotals = null;
public OlympicMedalsTopCountriesWithTotals OlympicMedalsTopCountriesWithTotals
{
get
{
if (_olympicMedalsTopCountriesWithTotals == null)
{
_olympicMedalsTopCountriesWithTotals = new OlympicMedalsTopCountriesWithTotals();
}
return _olympicMedalsTopCountriesWithTotals;
}
}
}razor
/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/css
Leyendas de datos Blazor: estilo y eventos
Se exponen varias propiedades, incluida la agrupación de partes de la leyenda.
Tiene IgbDataLegend varios eventos que se activan al representar su fila correspondiente, incluso durante las interacciones del mouse donde los valores se están actualizando. Estos eventos se enumeran a continuación con una descripción de para qué están diseñados para ser utilizados:
StyleGroupRow: Este evento se activa para cada grupo para aplicar estilo al texto que se muestra en las filas del grupo.
StyleHeaderRow: Este evento se activa al representar la fila de encabezado.
StyleSeriesRow: este evento se activa una vez para cada fila de la serie, lo que permite aplicar un estilo condicional a los valores de la serie.
StyleSeriesColumn: este evento se activa una vez para cada columna de la serie, lo que permite aplicar estilos condicionales a las diferentes columnas de la serie en el gráfico.
StyleSummaryRow: este evento se activa una vez al representar la fila de resumen.
StyleSummaryColumn: este evento se activa una vez al representar la columna de resumen.
Algunos de los eventos exponen un IgbDataLegendStylingRowEventArgs parámetro como sus argumentos, lo que le permite personalizar el texto de cada elemento, el color del texto y la visibilidad general de la fila. Los argumentos de evento también exponen propiedades específicas del evento. Por ejemplo, dado que el StyleSeriesRow evento se activa para cada serie, los argumentos del evento devolverán el índice de la serie y el título de la serie para la fila que representa la serie.
StyleSummaryColumn y SeriesStyleColumn exponen un IgbDataLegendStylingColumnEventArgs parámetro como sus argumentos, para personalizar cada campo de la serie. Los argumentos del evento también exponen propiedades específicas del evento, como el índice de columna y las propiedades relacionadas con los miembros de valor sobre las columnas.
EXAMPLE
DATA
MODULES
RAZOR
CSS
using System;
using System.Collections.Generic;
publicclassOlympicMedalsTopCountriesWithTotalsItem
{
publicstring Year { get; set; }
publicdouble America { get; set; }
publicdouble AmericaGold { get; set; }
publicdouble China { get; set; }
publicdouble ChinaGold { get; set; }
publicdouble Russia { get; set; }
publicdouble RussiaGold { get; set; }
publicdouble Total { get; set; }
}
publicclassOlympicMedalsTopCountriesWithTotals
: List<OlympicMedalsTopCountriesWithTotalsItem>
{
publicOlympicMedalsTopCountriesWithTotals()
{
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"1996",
America = 148,
AmericaGold = 50,
China = 110,
ChinaGold = 40,
Russia = 95,
RussiaGold = 20,
Total = 353
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2000",
America = 142,
AmericaGold = 40,
China = 115,
ChinaGold = 45,
Russia = 91,
RussiaGold = 40,
Total = 348
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2004",
America = 134,
AmericaGold = 35,
China = 121,
ChinaGold = 55,
Russia = 86,
RussiaGold = 25,
Total = 341
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2008",
America = 131,
AmericaGold = 20,
China = 129,
ChinaGold = 35,
Russia = 65,
RussiaGold = 35,
Total = 325
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2012",
America = 135,
AmericaGold = 25,
China = 115,
ChinaGold = 50,
Russia = 77,
RussiaGold = 15,
Total = 327
});
this.Add(new OlympicMedalsTopCountriesWithTotalsItem()
{
Year = @"2016",
America = 146,
AmericaGold = 45,
China = 112,
ChinaGold = 45,
Russia = 88,
RussiaGold = 30,
Total = 346
});
}
}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(IgbLegendModule),
typeof(IgbNumberAbbreviatorModule),
typeof(IgbDataChartCoreModule),
typeof(IgbDataChartCategoryModule),
typeof(IgbDataChartInteractivityModule),
typeof(IgbDataLegendModule),
typeof(IgbDataChartAnnotationModule)
);
await builder.Build().RunAsync();
}
}
}cs