Angular Gráfico de puntos
La Ignite UI for Angular Gráfico de puntos representa una colección de puntos. Los valores se representan en el eje y (etiquetas en el lado izquierdo) y las categorías se muestran en el eje x (etiquetas inferiores). Estos gráficos enfatizan la cantidad de cambio durante un período de tiempo o comparan varios elementos, así como la relación de partes de un todo, mostrando el total de los valores trazados.
Angular Point Chart Example
Puede crear el Gráfico de puntos Angular en el control IgxCategoryChartComponent
vinculando sus datos a la propiedad ItemsSource
y configurando la propiedad chartType
en Point enum, como se muestra en el siguiente ejemplo.
Angular Point Chart with Single Series
En el siguiente ejemplo, el Gráfico de puntos Angular traza una única fuente de datos seleccionando automáticamente la columna de datos numéricos para el eje y y la columna de datos no numéricos para el eje x.
Angular Point Chart with Multiple Series
Dado que el Gráfico de puntos Angular le permite combinar varias series y compararlas o ver cómo cambian con el tiempo, veamos qué fácil es lograrlo. Todo lo que tenemos que hacer es vincularnos a una fuente de datos que contenga los datos de China y EE. UU., y el gráfico de puntos se actualizará automáticamente para ajustarse a los datos adicionales.
Angular Point Chart Styling
Una vez configurado el Gráfico de puntos Angular, es posible que queramos realizar algunas personalizaciones de estilo adicionales, como cambiar los marcadores y sus contornos, pinceles y grosor.
Advanced Types of Point Charts
Puede crear tipos más avanzados de gráficos de puntos Angular utilizando el control IgxDataChartComponent
en lugar del control IgxCategoryChartComponent
siguiendo estos temas:
- Gráfico de burbujas de dispersión
- Gráfico de marcadores de dispersión
- Gráfico de dispersión HD
- Gráfico de marcadores polares
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores:
IgxCategoryChartComponent
IgxDataChartComponent
chartType
markerTypes
markerOutlines
markerBrushes
markerThickness