Descripción general de cuadros y gráficos Angular

Ignite UI for Angular Charts & Graphs es una extensa biblioteca de visualizaciones de datos que permite cuadros y paneles impresionantes e interactivos para sus aplicaciones web y móviles. Creado para la velocidad y la belleza, diseñado para funcionar en todos los navegadores modernos y con total toque e interactividad, puede crear rápida y fácilmente imágenes responsivas en su próxima aplicación en cualquier dispositivo.

La Ignite UI for Angular admite más de 65 tipos de series y combinaciones que le permiten visualizar cualquier tipo de datos, incluidas series de categorías, series financieras, series polares, series radiales, series de rango, series de dispersión, series de formas y series geoespaciales. No importa el tipo de comparación que esté haciendo o qué tipo de historia de datos esté tratando de contar, puede representar sus datos de cualquiera de estas maneras:

Cambian con el tiempo
Comparación
Correlación
Distribución
geoespacial
Resumen + Detalle
Parte al Todo
Clasificación

¡Impulsa tus visualizaciones más exigentes con los gráficos Angular Infragistics!

Angular Chart and Graph Types

El producto Angular tiene más de 65 tipos de cuadros y gráficos diferentes para cualquier escenario, desde una única visualización de gráficos hasta un panel interactivo. Puede crear gráficos Angular como circulares, de barras, de área, de líneas, de puntos, apilados, de anillos, de dispersión, de calibre, polares, de árbol, de acciones, financieros, geoespaciales y más para sus aplicaciones móviles o web. El beneficio de nuestro gráfico Angular frente a otros es la compatibilidad total con funciones como:

Diseño web responsivo integrado
Panorámica y zoom interactivos con mouse, teclado y toque
Control total de la animación del gráfico
Eventos detallados del gráfico
Soporte de transmisión en tiempo real
Soporte de alto volumen (millones de puntos de datos)
Líneas de tendencias y otras funciones de análisis de datos

Construido con un diseño modular de ejes, marcadores, series, leyendas y capas de anotaciones, el gráfico Angular facilita el diseño de una representación de cualquier tipo de historia de datos. Cree un gráfico simple con una sola serie de datos o cree historias de datos más complejas con múltiples series de datos, con múltiples ejes en vistas compuestas.

Category and Financial Chart vs. Data Chart

La categoría Angular y Gráfico financiero es a lo que nos referimos como nuestros gráficos específicos de dominio. Es un envoltorio alrededor de Angular Gráfico de datos que asume que su dominio es una categoría o una serie de precios financieros.

La elección de estos gráficos de dominio específicos permite simplificar la API y dibujar una gran cantidad de interfaces sobre los datos para configurar automáticamente el escenario del gráfico, todo ello sin necesidad de definir explícitamente atributos como ejes, series y anotaciones. Por el contrario, el gráfico de datos es muy explícito y es necesario definir cada parte crítica del gráfico.

Los gráficos de dominio utilizan un gráfico de datos en su núcleo; Por lo tanto, se aplican las mismas optimizaciones de rendimiento a ambos. La diferencia radica en si están tratando de hacer las cosas muy fáciles de especificar para el desarrollador, o de ser lo más flexibles posible. Angular Gráfico de datos es más detallado, ya que desbloquea todas nuestras capacidades de gráficos que necesita, lo que le permite mezclar y combinar cualquier número de series, ejes o anotaciones, por ejemplo. Para los gráficos de categorías y financieros, puede haber una situación que no se puede hacer fácilmente para la que el gráfico de datos es más adecuado, como una serie con una serie de dispersión con un eje x numérico.

Puede ser difícil saber qué gráfico elegir al principio. Es crucial comprender el tipo de serie y cuántas características adicionales desea presentar. Para una categoría básica o una serie financiera más ligera, recomendamos utilizar uno de los gráficos de dominio. Para escenarios más avanzados, se recomienda usar Angular Gráfico de datos, como presentar algo distinto de lo que cubre la propiedad del gráfico de chartType categorías, como una serie apilada o dispersa, o datos numéricos o basados en el tiempo. Vale la pena señalar que el Angular Gráfico financiero cubre solo los tipos de columnas, barras OHLC, velas y series de líneas.

Hacemos que la categoría angular y el gráfico financiero sean más fáciles de usar, la buena noticia es que siempre puede cambiar al gráfico de datos en el futuro.

Angular Bar Chart

El Gráfico de barras Angular, o gráfico de barras, se encuentra entre los tipos de gráficos de categorías más comunes que se utilizan para comparar rápidamente la frecuencia, el recuento, el total o el promedio de datos en diferentes categorías con datos codificados por barras horizontales de igual ancho y diferentes longitudes. Son ideales para mostrar variaciones en el valor de un artículo a lo largo del tiempo, distribución de datos y clasificación de datos ordenados (de mayor a menor, de peor a mejor). Los datos se representan mediante una colección de rectángulos que se extienden de izquierda a derecha del gráfico hacia los valores de los puntos de datos. Obtenga más información sobre nuestro gráfico de barras

Angular Pie Chart

El Gráfico circular Angular, o gráfico circular, es un tipo de gráfico de parte a todo muy común. Los gráficos de parte a todo muestran cómo las categorías (partes) de un conjunto de datos se suman a un valor total (todo). Las categorías se muestran en proporción a otras categorías según su porcentaje de valor con respecto al valor total que se analiza. Un gráfico circular representa los valores de datos como secciones en un gráfico circular o en forma de pastel. Cada sección, o sector circular, tiene una longitud de arco proporcional a su valor de datos subyacente. Los valores totales representados por las porciones circulares representan un valor completo, como 100 o 100%. Los gráficos circulares son perfectos para conjuntos de datos pequeños y fáciles de leer de un vistazo. Obtenga más información sobre nuestro gráfico circular

Angular Line Chart

El Gráfico de líneas Angular, o gráfico de líneas, es un tipo de gráfico de líneas de categoría que muestra los valores de datos continuos representados por puntos conectados por segmentos de línea recta de una o más cantidades durante un período de tiempo para mostrar tendencias y realizar análisis comparativos. El eje Y (etiquetas en el lado izquierdo) muestra un valor numérico, mientras que el eje X (etiquetas inferiores) muestra una serie de tiempo o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, lo que se representaría como varias líneas en el gráfico. Obtenga más información sobre nuestro gráfico de líneas

Angular Donut Chart

El Gráfico de anillos Angular o gráfico de anillos es una variante del Gráfico circular que ilustra proporcionalmente las apariciones de una variable en un círculo para representar partes de un todo. El gráfico de anillos tiene una abertura circular en el centro del gráfico circular, donde se puede mostrar un título o una explicación de categoría. Los gráficos de anillos pueden admitir múltiples anillos concéntricos, con soporte integrado para visualizar datos jerárquicos. Obtenga más información sobre nuestro gráfico de anillos

Angular Area Chart

El Gráfico de áreas Angular se representa utilizando una colección de puntos conectados por segmentos de línea recta con el área debajo de la línea completa. 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). Los gráficos de áreas 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. Obtenga más información sobre nuestro gráfico de áreas

Angular Sparkline Chart

El gráfico minigráfico Angular, o gráfico minigráfico, es un tipo de gráfico de categorías destinado a representarse dentro de un diseño de pequeña escala, como dentro de una celda de cuadrícula, o en cualquier lugar donde se necesite una visualización del tamaño de una palabra para contar una historia de datos. Al igual que otros tipos de gráficos Angular, el Sparkline Chart tiene varios elementos visuales y características correspondientes que se pueden configurar y personalizar, como el tipo de gráfico, marcadores, rangos, líneas de tendencia, trazado de valores desconocidos e información sobre herramientas. Los minigráficos se pueden representar como un Gráfico de líneas, Gráfico de áreas, Gráfico de columnas o un gráfico de pérdidas y ganancias. La diferencia entre el gráfico de tamaño completo equivalente al gráfico Spark es que el eje Y (etiquetas del lado izquierdo) y el eje X (etiquetas inferiores) no son visibles. Obtenga más información sobre nuestro minigráfico.

Angular Bubble Chart

El gráfico de burbujas Angular, o gráfico de burbujas, se utiliza para mostrar datos que constan de tres valores numéricos. Dos de los valores se trazan como un punto de intersección utilizando un sistema de coordenadas cartesiano (X, Y) y el tercer valor se representa como el tamaño del diámetro del punto. Esto le da su nombre al gráfico de burbujas: una visualización de burbujas de diferentes tamaños a lo largo de las coordenadas X e Y del gráfico. El gráfico de burbujas Angular se utiliza para mostrar las relaciones de las correlaciones de datos con las diferencias de valores de datos representadas por tamaño. También puedes utilizar una cuarta dimensión de datos, normalmente color, para diferenciar aún más los valores en tu gráfico de burbujas. Obtenga más información sobre nuestro gráfico de burbujas.

Angular Financial / Stock Chart

El gráfico Angular financiero o de acciones es una visualización compuesta que representa datos bursátiles y datos financieros en un gráfico de serie temporal que incluye elementos visuales interactivos en una barra de herramientas como filtros de día/semana/mes, selección de tipo de gráfico, selección de tipo de volumen, selección de indicadores. y selección de líneas de tendencias. Diseñado para la personalización, el gráfico de acciones Angular se puede personalizar de cualquier forma para brindar una visualización e interpretación más sencilla de sus datos. El gráfico financiero representa los datos de fecha y hora a lo largo del eje X (etiquetas inferiores) y muestra campos como volúmenes de apertura, máximo, mínimo y cierre. El tipo de gráfico para representar los datos de la serie temporal puede ser de barra, vela, columna o línea. Obtenga más información sobre nuestro gráfico de acciones.

Angular Column Chart

El Gráfico de columnas Angular, o gráfico de columnas, se encuentra entre los tipos de gráficos de categorías más comunes que se utilizan para comparar rápidamente la frecuencia, el recuento, el total o el promedio de datos en diferentes categorías con datos codificados por barras verticales de igual ancho y diferentes longitudes. Son ideales para mostrar variaciones en el valor de un artículo a lo largo del tiempo, distribución de datos y clasificación de datos ordenados (de mayor a menor, de peor a mejor). Los datos se representan mediante una colección de rectángulos que se extienden desde la parte superior hasta la parte inferior del gráfico hacia los valores de los puntos de datos. Obtenga más información sobre nuestro gráfico de columnas.

Angular Composite Chart

El Gráfico compuesto Angular, también llamado gráfico combinado, es una visualización que combina diferentes tipos de gráficos en la misma área de trazado. Es muy útil cuando se presentan dos series de datos que tienen una escala muy diferente y pueden expresarse en unidades diferentes. El ejemplo más común es el dólar en un eje y el porcentaje en el otro. Obtenga más información sobre nuestro gráfico compuesto.

Angular Polar Chart

El Gráfico de áreas polar Angular o gráfico polar pertenece a un grupo de gráficos polares y tiene la forma de un polígono relleno cuyos vértices o esquinas están ubicados en las coordenadas polares (ángulo/radio) de los puntos de datos. El Gráfico de áreas polar utiliza los mismos conceptos de trazado de datos que el Gráfico de dispersión, pero envuelve los puntos de datos alrededor de un círculo en lugar de estirarlos horizontalmente. Al igual que con otros tipos de series, se pueden trazar varios gráficos de áreas polares en el mismo gráfico de datos y se pueden superponer entre sí para mostrar diferencias y similitudes entre conjuntos de datos. Conozca más sobre nuestra carta polar.

Angular Scatter Chart

El Gráfico de dispersión Angular, o gráfico de dispersión, se utiliza para mostrar la relación entre dos valores utilizando un sistema de coordenadas cartesiano (X, Y) para trazar datos. Cada punto de datos se representa como el punto de intersección del valor de datos en los ejes X e Y. Los gráficos de dispersión llaman la atención sobre intervalos desiguales o grupos de datos. Pueden resaltar la desviación de los datos recopilados de los resultados previstos y, a menudo, se utilizan para trazar datos científicos y estadísticos. El gráfico de dispersión Angular organiza y traza los datos cronológicamente (incluso si los datos no están en orden cronológico antes de vincularse) en el eje X y el eje Y. Obtenga más información sobre nuestro gráfico de dispersión.

Angular Shape Chart

Los gráficos de formas Angular son un grupo de gráficos que toman una matriz de formas (matriz o matrices de puntos X/Y) y las representan como una colección de polígonos o polilíneas en un sistema de coordenadas cartesiano (x, y). A menudo se utilizan para resaltar regiones en datos científicos o se pueden utilizar para trazar diagramas, planos o incluso planos de edificios. Obtenga más información sobre nuestra tabla de formas.

Angular Spline Chart

El gráfico de spline Angular, o gráfico de spline, es un tipo de gráfico de líneas de categorías que muestra los valores de datos continuos representados por puntos conectados por segmentos de líneas suaves de una o más cantidades durante un período de tiempo para mostrar tendencias y realizar análisis comparativos. El eje Y (etiquetas en el lado izquierdo) muestra un valor numérico, mientras que el eje X (etiquetas inferiores) muestra una serie de tiempo o una categoría de comparación. Puede incluir uno o más conjuntos de datos para comparar, lo que se representaría como varias líneas en el gráfico. El gráfico Angular Spline es idéntico al gráfico Angular Spline, la única diferencia es que el gráfico de líneas son los puntos conectados por líneas rectas y los puntos del gráfico spline están conectados por curvas suaves. Obtenga más información sobre nuestro gráfico de splines.

Angular Step Chart

El gráfico de pasos Angular, o gráfico de pasos, es un gráfico de categorías que representa una colección de puntos de datos conectados por líneas verticales y horizontales continuas que forman una progresión escalonada. Los valores se representan en el eje Y (etiquetas de la izquierda) y las categorías se muestran en el eje X (etiquetas inferiores). El gráfico de línea de paso Angular enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos. El gráfico de líneas de pasos Angular es idéntico al Gráfico de áreas de pasos Angular en todos los aspectos excepto que el área debajo de las líneas de pasos no está completa. Obtenga más información sobre nuestro gráfico de pasos

Angular Treemap

La Ignite UI for Angular Treemap muestra datos jerárquicos (estructurados en árbol) como un conjunto de nodos anidados. A cada rama del árbol se le asigna un nodo de mapa de árbol, que luego se mosaico con nodos más pequeños que representan subramas. El rectángulo de cada nodo tiene un área proporcional a una dimensión especificada en los datos. A menudo, los nodos están coloreados para mostrar una dimensión separada de los datos. Obtenga más información sobre nuestros mapas de árboles.

Angular Charts Key Features

Muestre cómo cambian sus datos con el tiempo con nuestro Eje de Tiempo integrado. Cambiaremos dinámicamente escalas de tiempo y formatos de etiquetas a medida que interactúa con su gráfico. Hemos incluido un Gráfico financiero completo con todas las funciones que espera de sus gráficos financieros, como Yahoo Finance o Google Finance.

Dynamic Charts

Visualice sus datos creando un nuevo Gráfico compuesto y superponiendo varias series en un solo gráfico. En el gráfico, puede mostrar y superponer varias columnas del gráfico para crear columnas apiladas.

Custom Tooltips

Visualice sus datos creando nuevas vistas compuestas y superponiendo varias series en un solo gráfico. En el gráfico, puede crear información sobre herramientas personalizada con imágenes, enlace de datos e incluso combinar información sobre herramientas de varias series en una sola información sobre herramientas.

High-Performance, Real-Time Charting

Muestre miles de puntos de datos con actualizaciones a nivel de milisegundos en tiempo real con datos en vivo y en streaming. No experimentará retrasos, parpadeos en la pantalla ni retrasos visuales, incluso cuando interactúe con el gráfico en un dispositivo táctil. Para ver una demostración, consulte el tema Gráfico con alta frecuencia.

High-Volume Data Handling

Optimice el rendimiento del gráfico para representar millones de puntos de datos mientras el gráfico sigue proporcionando un rendimiento fluido cuando los usuarios finales intentan acercar o alejar el zoom o navegar por el contenido del gráfico. Para ver una demostración, consulte el tema Gráfico con alto volumen.

Modular Design

El gráfico Angular está diseñado para la modularidad. Solo las funciones necesarias forman parte de su implementación, por lo que obtiene el menor espacio posible en sus páginas renderizadas.

Smart Data Binding

Elijamos el tipo de gráfico. Nuestro Adaptador de datos inteligente elige automáticamente el mejor tipo de gráfico para los datos. Todo lo que haces es configurar la fuente de datos y nosotros hacemos el resto.

Trendlines

Los gráficos Angular admiten todas las líneas de tendencia que necesitará, incluidas las lineales (x), cuadráticas (x2), cúbicas (x3), cuárticas (x4), quínticas (x5), logarítmicas (log x), exponenciales (ex) y de potencia. líneas de tendencia de la ley (axk + o(xk)).

Interactive Panning and Zooming

Utilice el teclado simple o multitáctil, la barra de zoom, la rueda del mouse, arrastre y seleccione para cualquier región rectangular con el mouse para acercar y ver de cerca los puntos de datos, desplazar el historial de datos o desplazar regiones de datos.

Markers, Tooltips, and Templates

Utilice uno de los 10 tipos de marcadores o cree su propia plantilla de marcadores para resaltar datos o utilice información sobre herramientas simples o un gráfico de múltiples ejes y series con información sobre herramientas personalizada para brindar más contexto y significado a sus datos.

But Wait, There’s More!

Si está considerando otros gráficos Angular en el mercado, aquí hay algunas cosas en las que debe pensar:

Incluimos más de 65 tipos de gráficos Angular y gráficos combinados, con la configuración más sencilla del mercado con nuestro adaptador de datos inteligente.
Nuestros gráficos están optimizados en todas las plataformas, incluidas Angular, Blazor, jQuery/JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI y Xamarin. Admiten la misma API y las mismas funciones en todas las plataformas.
Nuestro gráfico de acciones y gráficos financieros le brindan todo lo que necesita para una experiencia similar a la de Yahoo Finance o Google Finance, todo con una sola línea de código.
Probamos el rendimiento de todos los demás. Todo el mundo dice que son rápidos y que pueden manejar muchos datos, pero podemos demostrarlo. Vea usted mismo cómo manejamos grandes volúmenes de datos y transmisión de datos en tiempo real.
Estamos aquí 24x5. Infragistics tiene soporte global que siempre está en línea. Para América del Norte, Asia Pacífico, Medio Oriente y Europa, ¡estamos a su disposición cuando usted lo esté!
Tenemos muchos más controles de UI en Angular además de los Gráficos. ¡Ofrecemos una solución Angular completa para construir sus aplicaciones!

Ignite UI for Angular se basa en Angular para el desarrollador Angular, sin dependencias de terceros. Estamos 100% optimizados para Angular.
Ofrecemos la primera y única plataforma integral de diseño a código de extremo a extremo del mundo para diseñadores de UX, diseñadores visuales y desarrolladores que generará controles Angular con píxeles perfectos a partir de diseños Sketch. Con Indigo.Design, todo lo que cree en Sketch desde nuestro Design System Indigo coincide con nuestra Ignite UI for Angular.

API References

Todos los tipos de gráficos mencionados en este tema se implementan en estos componentes API: