Información sobre herramientas de gráficos Angular
En los gráficos Angular, la información sobre herramientas proporciona detalles sobre los datos vinculados y se muestran en ventanas emergentes cuando el usuario final pasa el cursor sobre los puntos de datos. La información sobre herramientas es compatible con los controles IgxCategoryChartComponent
, IgxFinancialChartComponent
e IgxDataChartComponent
.
Angular Chart Tooltip Types
Angular Chart proporciona tres tipos de información sobre herramientas que puede obtener con la información sobre herramientas habilitada configurando la propiedad toolTipType
. El siguiente ejemplo muestra el Gráfico de columnas con un cuadro combinado que puede utilizar para cambiar el tipo de información sobre herramientas.
La propiedad toolTipType
es configurable y se puede establecer en una de las siguientes opciones:
El valor de la propiedad | Descripción |
---|---|
Default Información sobre herramientas |
Muestra información sobre herramientas para un solo elemento cuando el puntero se coloca sobre él. |
Data Información sobre herramientas |
Muestra información sobre herramientas de datos para todas las series del gráfico. |
Item Información sobre herramientas |
Muestre información sobre herramientas para cada elemento de datos en la categoría sobre la que se coloca el puntero. |
Category Información sobre herramientas |
Muestra información sobre herramientas agrupada para todos los puntos de datos de la categoría sobre la que está colocado el puntero. |
Angular Chart Tooltip Template
Si ninguno de los tipos integrados de información sobre herramientas coincide con sus requisitos, puede crear su propia información sobre herramientas para mostrar y diseñar títulos de series, valores de datos y valores de ejes. Las siguientes secciones demuestran cómo hacer esto en diferentes tipos de gráficos Angular.
Custom Tooltips in Category Chart
Este ejemplo muestra cómo crear información sobre herramientas personalizada para todas las series en el control Angular IgxCategoryChartComponent
. Tenga en cuenta que también puede aplicar la misma lógica a la información sobre herramientas personalizada en el control Angular IgxFinancialChartComponent
.
Custom Tooltips in Data Chart
Este ejemplo muestra cómo crear información sobre herramientas personalizada para cada serie en el control Angular Gráfico de datos.
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
Los componentes IgxCategoryChartComponent
e IgxFinancialChartComponent
comparten las siguientes propiedades de API:
En el componente IgxDataChartComponent
, puede utilizar los siguientes componentes y propiedades de API:
IgxDataToolTipLayerComponent
IgxItemToolTipLayerComponent
IgxCategoryToolTipLayerComponent
ShowDefaultToolTip