Angular Data Legend

En Ignite UI for Angular, IgxDataLegendComponent es una versión altamente personalizable de IgxLegendComponent, que muestra valores de series y proporciona muchas propiedades de configuración para filtrar filas de series y columnas de valores, diseñar y formatear valores. Esta leyenda se actualiza al mover el mouse dentro del área de trazado de IgxCategoryChartComponent, IgxFinancialChartComponent e IgxDataChartComponent. Además, tiene un estado persistente que recuerda el último punto sobre el que se pasó el mouse cuando el puntero del mouse sale del área de trazado. Muestra este contenido utilizando un conjunto de tres tipos de filas (encabezado, serie, resumen) y cuatro tipos de columnas (título, etiqueta, valor, unidad).

Angular Data Legend Rows

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.

Header Row

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.

Series Row

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).

Summary Row

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.

Angular Data Legend Columns

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.

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.

Type of Series	Column Names
Serie de categorías	Valor
Serie radial	Valor
Serie polar	Radius, Angle
Bubble Series	X, Y, Radius
Serie de dispersión	X, Y
Serie de gama	Alta baja
Serie financiera	Alto, Bajo, Abrir, Cerrar, Cambiar, Precio típico, Volumen

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.

Title Column

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.

Label Column

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.

Value Column

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.

Unit Column

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.

Customizing Columns

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.

Type of Series	Propiedades de la serie
Serie de categorías	ValueMemberAsLegendLabel="$" ValueMemberAsLegendUnit="M"
Serie radial	ValueMemberAsLegendLabel="Distance:" ValueMemberAsLegendUnit="KM"
Serie polar	RadiusMemberAsLegendLabel="Radius:" RadiusMemberAsLegendUnit="KM" AngleMemberAsLegendLabel="Angle:" AngleMemberAsLegendUnit="°"
Serie de gama	HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K"
Serie financiera	OpenMemberAsLegendLabel="O:" OpenMemberAsLegendUnit="K" HighMemberAsLegendLabel="H:" HighMemberAsLegendUnit="K" LowMemberAsLegendLabel="L:" LowMemberAsLegendUnit="K" CloseMemberAsLegendLabel="C:" CloseMemberAsLegendUnit="K"

Además, puede usar la propiedad UnitText en IgxDataLegendComponent para cambiar el texto que se muestra en todas las columnas de Unidad.

Angular Data Legend Styling

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:

Angular Data Legend Value Formatting

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:

Angular Data Legend Value Mode

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 (£):

Angular Data Legend Grouping

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.

Angular Data Legend Styling & Events

Se exponen varias propiedades, incluida la agrupación de partes de la leyenda.

GroupRowMargin
GroupTextMargin
groupTextColor
GroupTextFontSize
GroupTextFontFamily
GroupTextFontStyle
GroupTextFontStretch
GroupTextFontWeight
HeaderTextMargin
headerTextColor
HeaderTextFontSize
HeaderTextFontFamily
HeaderTextFontStyle
HeaderTextFontStretch
HeaderTextFontWeight

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.