En Ignite UI for Angular, es una versión altamente personalizable de la IgxLegendComponent, 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 IgxDataLegendComponent formato de los valores. Esta leyenda se actualiza al mover el ratón dentro del área de la trama de la IgxCategoryChartComponent, IgxFinancialChartComponent, y IgxDataChartComponent. 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 IgxDataLegendComponent 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.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
exportclassHighestGrossingMoviesItem{
publicconstructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
exportclassHighestGrossingMoviesextendsArray<HighestGrossingMoviesItem> {
publicconstructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
ts
<divclass="container vertical sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igx-data-legendname="legend"
#legendunitsText="B"
[target]="chart"></igx-data-legend></div><divclass="container fill"><igx-category-chartname="chart"
#chartchartType="Column"
[dataSource]="highestGrossingMovies"xAxisInterval="1"yAxisTitle="Billions of U.S. Dollars"yAxisTitleLeftMargin="10"yAxisTitleRightMargin="5"yAxisLabelLeftMargin="0"isHorizontalZoomEnabled="false"isVerticalZoomEnabled="false"crosshairsSnapToData="true"></igx-category-chart></div></div>html
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular 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 IgxDataLegendComponent si el eje x muestra fechas. Para otros tipos de series, IgxDataLegendComponent 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 Angular
Las columnas de IgxDataLegendComponent 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 IgxDataLegendComponent usando las propiedades includedColumns excludedColumns.
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
//begin async dataexportclassMultipleStocksextendsArray<Array<StockItem>> {
publicstaticasync fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),awaitthis.getGoogleStock(),
awaitthis.getAmazonStock(),
//await this.getTeslaStock()
];
returnnewPromise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */publicstaticasync getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */publicstaticasync getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicstaticasync getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */publicstaticasync getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Google"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
publicstatic convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"let item = new StockItem();
item.date = newDate(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
exportclassStockItem{
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async datats
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
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 los diferentes IgxSeriesComponent trazados 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 para 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 usar la propiedad UnitText en IgxDataLegendComponent para cambiar el texto que se muestra en todas las columnas de Unidad.
Estilo de leyenda de datos Angular
IgxDataLegendComponent 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 desea establecer el color del texto de todas las columnas, debe establecer 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 Angular
IgxDataLegendComponent 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:
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
exportclassHighestGrossingMoviesItem{
publicconstructor(init: Partial<HighestGrossingMoviesItem>) {
Object.assign(this, init);
}
public franchise: string;
public totalRevenue: number;
public highestGrossing: number;
}
exportclassHighestGrossingMoviesextendsArray<HighestGrossingMoviesItem> {
publicconstructor(items: Array<HighestGrossingMoviesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new HighestGrossingMoviesItem(
{
franchise: `Marvel Universe`,
totalRevenue: 22.55,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Star Wars`,
totalRevenue: 10.32,
highestGrossing: 2.07
}),
new HighestGrossingMoviesItem(
{
franchise: `Harry Potter`,
totalRevenue: 9.19,
highestGrossing: 1.34
}),
new HighestGrossingMoviesItem(
{
franchise: `Avengers`,
totalRevenue: 7.76,
highestGrossing: 2.8
}),
new HighestGrossingMoviesItem(
{
franchise: `Spider Man`,
totalRevenue: 7.22,
highestGrossing: 1.28
}),
new HighestGrossingMoviesItem(
{
franchise: `James Bond`,
totalRevenue: 7.12,
highestGrossing: 1.11
}),
];
super(...newItems.slice(0));
}
}
}
ts
<divclass="container vertical sample"><divclass="legend-title">
Highest Grossing Movie Franchises
</div><divclass="legend"><igx-data-legendname="legend"
#legend
[target]="chart"valueFormatMode="Decimal"valueFormatMinFractions="1"unitsText="B"></igx-data-legend></div><divclass="container fill"><igx-category-chartname="chart"
#chartchartType="Column"
[dataSource]="highestGrossingMovies"xAxisInterval="1"yAxisTitle="Billions of U.S. Dollars"yAxisTitleLeftMargin="10"yAxisTitleRightMargin="5"yAxisLabelLeftMargin="0"isHorizontalZoomEnabled="false"isVerticalZoomEnabled="false"toolTipType="None"crosshairsDisplayMode="None"isCategoryHighlightingEnabled="true"></igx-category-chart></div></div>html
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
Modo de valor de leyenda de datos Angular
Tiene la capacidad de cambiar la visualización decimal predeterminada de los valores dentro de IgxDataLegendComponent 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 establecido en "en-GB" para mostrar el símbolo de libras esterlinas (£):
EXAMPLE
DATA
MODULES
TS
HTML
SCSS
//begin async dataexportclassMultipleStocksextendsArray<Array<StockItem>> {
publicstaticasync fetch(): Promise<MultipleStocks> {
const dataSources: any[] = [
//await this.getAmazonStock(),awaitthis.getGoogleStock(),
awaitthis.getAmazonStock(),
//await this.getTeslaStock()
];
returnnewPromise<MultipleStocks>((resolve, reject) => {
resolve(dataSources);
});
}
/** gets Amazon stock OHLC prices from a .JSON file */publicstaticasync getAmazonStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Amazon"]
};
// console.log("fetchAmazonStock: ", stockData.length);returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Tesla stock OHLC prices from a .JSON file */publicstaticasync getTeslaStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Tesla"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Microsoft stock OHLC prices from a .JSON file */publicstaticasync getMicrosoftStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Microsoft"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
/** gets Google stock OHLC prices from a .JSON file */publicstaticasync getGoogleStock(): Promise<StockItem[]> {
let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json";
let response = await fetch(url);
let jsonData = await response.json();
let stockData = this.convertData(jsonData);
// setting data intent for Series Title, e.g. FinancialChart usage
(stockData asany).__dataIntents = {
close: ["SeriesTitle/Google"]
};
returnnewPromise<StockItem[]>((resolve, reject) => {
resolve(stockData);
});
}
publicstatic convertData(jsonData: any[]): StockItem[] {
let stockItems: StockItem[] = [];
for (let json of jsonData) {
let parts = json.date.split("-"); // "2020-01-01"let item = new StockItem();
item.date = newDate(parts[0], parts[1], parts[2]);
item.open = json.open;
item.high = json.high;
item.low = json.low;
item.close = json.close;
item.volume = json.volume;
stockItems.push(item);
}
return stockItems;
}
}
exportclassStockItem{
public open?: number;
public close?: number;
public high?: number;
public low?: number;
public volume?: number;
public date?: Date;
}
//end async datats
/* styles are loaded the Shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/scss
Agrupamiento de leyendas de datos Angular
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.
Tiene IgxDataLegendComponent 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 IgxDataLegendStylingRowEventArgs 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 IgxDataLegendStylingColumnEventArgs 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.