React Chart Data Tooltip
En Ignite UI for React, DataToolTip muestra valores y títulos de series, así como distintivos de leyenda de series en una información sobre herramientas. Además, proporciona muchas propiedades de configuración de la IgrDataLegend para filtrar filas de series y columnas de valores, estilos y valores de formato. Este tipo de información sobre herramientas se actualiza al mover el ratón dentro del área de trazado de los IgrCategoryChart componentes y IgrFinancialChart IgrDataChart.
React Data Tooltip Properties
Todas las propiedades de IgrDataToolTipLayer tienen el prefijo DataToolTip y expuesto en la API de IgrCategoryChart y IgrFinancialChart Componentes. Sin embargo, deberá crear una instancia de IgrDataToolTipLayer y agréguelo a la colección de series de IgrDataChart si desea usarlo con gráficos radiales, gráficos polares, gráficos de dispersión.
React Data Tooltip Elements
DataToolTip muestra contenido utilizando un conjunto de tres tipos de filas y cuatro tipos de columnas.
React Data Tooltip Rows
Las filas de DataToolTip incluyen la fila de encabezado, las filas de 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 dataToolTipHeaderText.
La fila de la serie puede ser en realidad un conjunto de filas correspondientes a 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 y la unidad de abreviatura, si se especifica.
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 dataToolTipSummaryTitleText de la leyenda. Además, puede utilizar la propiedad dataToolTipSummaryType para personalizar si muestra los valores total, mínimo, máximo o promedio de la serie en la fila de resumen.
El siguiente ejemplo demuestra la información sobre herramientas de datos con un resumen aplicado:
React Data Tooltip Columns
Las columnas de la IgrDataToolTipLayer incluyen las columnas título, etiqueta, valor y unidades. Cada serie del gráfico puede tener varias columnas para la etiqueta, el valor y las unidades, en función de las dataToolTipIncludedColumns dataToolTipExcludedColumns colecciones del gráfico.
La columna de título muestra los distintivos de leyenda y los títulos de las series, que provienen de la chartTitle propiedad de los diferentes IgrSeries trazados en el gráfico.
La columna de etiqueta muestra el nombre o la abreviatura de las diferentes rutas de propiedad en las colecciones dataToolTipIncludedColumns o dataToolTipExcludedColumns de la información sobre herramientas.
La columna de valor muestra los valores de la serie como texto abreviado que se puede formatear usando la propiedad dataToolTipValueFormatAbbreviation para aplicar la misma abreviatura para todos los números estableciendo esta propiedad en Auto o Shared. Alternativamente, un usuario puede seleccionar otras abreviaturas como Independent, Kilo, Million, etc. La precisión de los valores abreviados se controla utilizando dataToolTipValueFormatMinFractions y dataToolTipValueFormatMaxFractions para dígitos mínimo y máximo, respectivamente.
La columna de unidades muestra un símbolo de abreviatura y/o texto de unidad, que se puede configurar en DataToolTip configurando dataToolTipUnitsText para todas las columnas o usando las siguientes propiedades en cada serie del gráfico:
- Serie de categorías (por ejemplo, Serie de columnas)
- ValueMemberAsLegendUnit="K"
- Serie de Precios Financieros:
- OpenMemberAsLegendUnit="K"
- LowMemberAsLegendUnit="K"
- HighMemberAsLegendUnit="K"
- CloseMemberAsLegendUnit="K"
- Range Series:
- LowMemberAsLegendUnit="K"
- HighMemberAsLegendUnit="K"
- Radial Series:
- ValueMemberAsLegendUnit="km"
- Polar Series:
- RadiusMemberAsLegendUnit="km"
- AngleMemberAsLegendUnit="degrees"
Para las propiedades mencionadas anteriormente, existen propiedades correspondientes que terminan en MemberAsLegendLabel para determinar el texto en las columnas de etiquetas mencionadas anteriormente.
Las columnas incluidas en las colecciones dataToolTipIncludedColumns y dataToolTipExcludedColumns generalmente corresponden a las rutas de valor de los elementos de datos subyacentes, pero la serie financiera tiene la opción de incluir algunas especiales además de las rutas High, Low, Open y Close que son necesarias para la serie financiera para trazar correctamente. Tiene la capacidad de mostrar las opciones TypicalPrice, Change y Volume dentro de la información sobre herramientas.
El siguiente ejemplo muestra una información sobre herramientas de datos con las columnas agregadas de Abrir, Alto, Bajo, Cerrar y Cambiar:
React Data Tooltip Grouping for Data Chart
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. groupingMode debe establecerse en "Agrupado" y labelDisplayMode debe establecerse en "Visible" en la capa de información sobre herramientas de datos.
React Data Tooltip Grouping & Positioning for Category Chart & Financial Chart
Puede establecer la propiedad dataToolTipGroupingMode en Grouped o Individual para agrupar el contenido de varias series en una sola información sobre herramientas o separar el contenido de cada serie en varias descripciones sobre herramientas. En el modo Grouped, puede personalizar dónde se muestra la información sobre herramientas configurando las propiedades dataToolTipGroupedPositionModeX y dataToolTipGroupedPositionModeY. Básicamente, esto le permite personalizar las alineaciones horizontales y verticales de la información sobre herramientas y si desea que realice un seguimiento de los puntos de la serie más cercanos a la posición del mouse o fije la información sobre herramientas al borde del área de trazado.
El siguiente ejemplo muestra una información sobre herramientas de datos ubicada en la parte superior derecha del gráfico:
React Data Tooltip Value Formatting
DataToolTip proporciona abreviatura automática de números grandes utilizando su propiedad dataToolTipValueFormatAbbreviation. Esto agrega un multiplicador en la columna de unidades, como kilo, millón, mil millones, etc. Puede personalizar el número de dígitos fraccionarios que se muestran configurando dataToolTipValueFormatMinFractions y dataToolTipValueFormatMaxFractions. 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 una información sobre herramientas de datos con las fracciones mínima y máxima configuradas:
React Data Tooltip Value Mode
Puede cambiar la visualización decimal predeterminada de los valores dentro de DataToolTip para que sean moneda cambiando la propiedad dataToolTipValueFormatMode de la capa. DataToolTip también expone la capacidad de modificar la cultura del símbolo de moneda mostrado usando su propiedad dataToolTipValueFormatCulture y configurándola en su etiqueta cultural correspondiente. Por ejemplo, el siguiente ejemplo muestra un gráfico con dataToolTipValueFormatCulture establecido en "en-GB":
React Data Tooltip Styling
La información sobre herramientas de datos proporciona propiedades para diseñar cada tipo de columna. Cada una de estas propiedades comienza con Título, Etiqueta, Valor o Unidades, y puede diseñar el color, la fuente y el margen del texto. Por ejemplo, si quisiera establecer el color del texto de cada uno de estos, establecería las propiedades dataToolTipTitleTextColor, dataToolTipLabelTextColor, dataToolTipValueTextColor y dataToolTipUnitsTextColor.
El siguiente ejemplo demuestra el uso de las propiedades de estilo mencionadas anteriormente:
Se exponen varias propiedades, incluidas las partes de agrupación de la información sobre herramientas.
GroupTextMargingroupTextColorGroupTextFontSizeGroupTextFontFamilyGroupTextFontStyleGroupTextFontStretchGroupTextFontWeightHeaderTextMarginheaderTextColorHeaderTextFontSizeHeaderTextFontFamilyHeaderTextFontStyleHeaderTextFontStretchHeaderTextFontWeight
API References
dataToolTipExcludedColumnsdataToolTipGroupedPositionModeXdataToolTipGroupedPositionModeYdataToolTipGroupingModedataToolTipHeaderTextdataToolTipIncludedColumnsdataToolTipLabelTextColorIgrDataToolTipLayerdataToolTipSummaryTitleTextdataToolTipSummaryTypedataToolTipTitleTextColordataToolTipUnitsTextColordataToolTipUnitsTextdataToolTipValueFormatAbbreviationdataToolTipValueFormatCulturedataToolTipValueFormatMaxFractionsdataToolTipValueFormatMaxFractionsdataToolTipValueFormatMinFractionsdataToolTipValueFormatModedataToolTipValueTextColorMemberAsLegendLabel