React Data Legend

En Ignite UI for React, la es una versión altamente personalizable de la IgrDataLegend IgrLegend, que muestra valores de series y proporciona muchas propiedades de configuración para filtrar filas de series y columnas de valores, estilos y valores de formato. Esta leyenda se actualiza al mover el ratón dentro del área de trazado de la IgrCategoryChart,, IgrFinancialChart y IgrDataChart. Además, tiene un estado persistente que recuerda el último punto sobre el que se ha desplazado el puntero del usuario para salir 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).

React Data Legend Rows

Las filas del incluyen la fila de encabezado, la(s) fila(s) de la serie(s) y la fila de IgrDataLegend resumen. La fila de encabezado muestra la etiqueta del eje del punto sobre el que se mantiene el puntero y se puede cambiar mediante la headerText propiedad.

Header Row

La fila de encabezado muestra la etiqueta actual del eje x al pasar el ratón por encima de la serie de categorías y las series financieras. Puede utilizar headerFormatDate las propiedades y para dar formato a la fecha y headerFormatTime la hora en el si el IgrDataLegend eje x muestra las fechas. Para otros tipos de series, no IgrDataLegend representa la fila de 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.

React Data Legend Columns

Las columnas de la incluyen el título de la serie, la etiqueta, el valor de la columna de datos y la IgrDataLegend unidad opcional asociada al valor. Algunas series del gráfico pueden tener varias columnas para la etiqueta, el valor y las unidades. Por ejemplo, las series de precios financieros tienen columnas de datos High, Low, Open y Close que se pueden filtrar en el uso de las IgrDataLegend includedColumns propiedades o 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 los distintivos de leyenda y los títulos de las series, que provienen de la title propiedad de los diferentes IgrSeries 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 utilizar la función UnitText propiedad en la propiedad IgrDataLegend para cambiar el texto que se muestra en todas las columnas de la unidad.

React Data Legend Styling

Proporciona IgrDataLegend propiedades para aplicar estilo a cada tipo de columna. Cada una de estas propiedades comienza con Title, Label, Value o Units. Puede aplicar estilo al color, la fuente y el margen del texto. Por ejemplo, si desea establecer el color del texto de todas las columnas, debe establecer las titleTextColor propiedades,, valueTextColor labelTextColor y unitsTextColor. En el ejemplo siguiente se muestra el uso de las propiedades de estilo mencionadas anteriormente:

React Data Legend Value Formatting

Proporciona IgrDataLegend la abreviatura automática de números grandes utilizando su valueFormatAbbreviation propiedad. Esto agrega un multiplicador en la columna de unidades, como kilo, millón, billón, etc. Puede personalizar el número de dígitos fraccionarios que se muestran estableciendo el 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. En el ejemplo siguiente se muestra cómo utilizar esas propiedades:

React Data Legend Value Mode

Tiene la capacidad de cambiar la visualización decimal predeterminada de los valores dentro de la a una moneda cambiando la IgrDataLegend valueFormatMode propiedad. Además, puede cambiar la referencia cultural del símbolo de moneda mostrado estableciendo una etiqueta de referencia cultural en la valueFormatCulture propiedad. Por ejemplo, la siguiente leyenda de datos de ejemplo con el valor establecido en "en-GB" para mostrar el valueFormatCulture símbolo de libras esterlinas (£):

React 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 que se mostrará 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.

React 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 IgrDataLegend 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 IgrDataLegendStylingRowEventArgs parámetro como 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 los eventos exponen un IgrDataLegendStylingColumnEventArgs parámetro como sus argumentos, para personalizar cada campo de la serie. Los argumentos de 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.