Blazor Chart Data Tooltip
En Ignite UI for Blazor, DataToolTip muestra valores y títulos de series, así como insignias de leyenda de series en una información sobre herramientas. Además, proporciona muchas propiedades de configuración de IgbDataLegend
para filtrar filas de series y columnas de valores, diseñar y formatear valores. Este tipo de información sobre herramientas se actualiza al mover el mouse dentro del área de trazado de los componentes IgbCategoryChart
, IgbFinancialChart
e IgbDataChart
.
Blazor Data Tooltip Properties
Todas las propiedades de IgbDataToolTipLayer
tienen el prefijo DataToolTip y se exponen en la API de los componentes IgbCategoryChart
e IgbFinancialChart
. Sin embargo, deberá crear una instancia de IgbDataToolTipLayer
y agregarla a la colección de series del componente IgbDataChart
si desea utilizarlo con gráficos radiales, gráficos polares y gráficos de dispersión.
Blazor Data Tooltip Elements
DataToolTip muestra contenido utilizando un conjunto de tres tipos de filas y cuatro tipos de columnas.
Blazor 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 el cursor y se puede cambiar mediante 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:
Blazor Data Tooltip Columns
Las columnas de IgbDataToolTipLayer
incluyen las columnas de título, etiqueta, valor y unidades. Cada serie del gráfico puede tener varias columnas para etiqueta, valor y unidades según las colecciones DataToolTipIncludedColumns
o DataToolTipExcludedColumns
del gráfico.
La columna de título muestra insignias de leyenda y títulos de series, que provienen de la propiedad ChartTitle
de las diferentes Series
trazadas 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 al que se le puede dar formato utilizando la propiedad DataToolTipValueFormatAbbreviation
para aplicar la misma abreviatura a 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:
Blazor 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.
Blazor 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:
Blazor 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:
Blazor 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 mediante 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":
Blazor 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.
GroupTextMargin
GroupTextColor
GroupTextFontSize
GroupTextFontFamily
GroupTextFontStyle
GroupTextFontStretch
GroupTextFontWeight
HeaderTextMargin
HeaderTextColor
HeaderTextFontSize
HeaderTextFontFamily
HeaderTextFontStyle
HeaderTextFontStretch
HeaderTextFontWeight
API References
DataToolTipExcludedColumns
DataToolTipGroupedPositionModeX
DataToolTipGroupedPositionModeY
DataToolTipGroupingMode
DataToolTipHeaderText
DataToolTipIncludedColumns
DataToolTipLabelTextColor
IgbDataToolTipLayer
DataToolTipSummaryTitleText
DataToolTipSummaryType
DataToolTipTitleTextColor
DataToolTipUnitsTextColor
DataToolTipUnitsText
DataToolTipValueFormatAbbreviation
DataToolTipValueFormatCulture
DataToolTipValueFormatMaxFractions
DataToolTipValueFormatMaxFractions
DataToolTipValueFormatMinFractions
DataToolTipValueFormatMode
DataToolTipValueTextColor
MemberAsLegendLabel