Angular Gráfico de barras

La Ignite UI for Angular Gráfico de barras angulares, gráfico de barras o Gráfico de barras horizontales 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 con alturas iguales. pero de diferentes longitudes. Este gráfico es ideal para mostrar variaciones en el valor de un artículo a lo largo del tiempo. 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. Gráfico de barras es muy similar al Gráfico de columnas, excepto que Gráfico de barras se representa con una rotación de 90 grados en el sentido de las agujas del reloj y, por lo tanto, tiene orientación horizontal (de izquierda a derecha), mientras que Gráfico de columnas tiene orientación vertical (arriba y abajo).

Angular Bar Chart Example

Puede crear Gráfico de barras Angular en el control IgxDataChartComponent vinculando sus fuentes de datos a múltiples IgxBarSeriesComponent, como se muestra en el siguiente ejemplo:

Bar Chart Recommendations

Are Angular Bar Charts right for your project?

Angular Gráfico de barras incluye varias variantes según sus datos o cómo desea contar la historia correcta con sus datos. Éstas incluyen:

Gráfico de barras agrupadas
Gráfico de barras apiladas
Gráfico de barras polares
Gráfico de barras apiladas

Bar Chart Use Cases

Existen varios casos de uso comunes para elegir un Gráfico de barras:

Debe mostrar tendencias a lo largo del tiempo o un cambio de valor numérico en una categoría de datos.
Necesita comparar valores de datos de 1 o más series de datos.
Quiere mostrar una comparación de parte con el todo.
Quiere mostrar el porcentaje superior o inferior de las categorías.
Analizar múltiples puntos de datos agrupados en subcategorías (barra apilada).

Estos casos de uso se utilizan comúnmente para los siguientes escenarios:

Gestión de ventas.
La gestión del inventario.
Gráficos de acciones.
Cualquier valor de cadena que compare un valor numérico o un valor de serie temporal.

Bar Chart Best Practices:

Inicie su eje numérico en 0.
Utilice un solo color para las barras.
Asegúrese de que el espacio que separa cada barra sea la mitad del ancho de la barra misma.
Asegúrese de que la clasificación o comparación de categorías (elementos) ordenadas estén ordenadas en orden creciente o decreciente.
Alinee a la derecha los valores de categoría en el eje Y (etiquetas del lado izquierdo del gráfico) para facilitar la lectura.

When Not to Use Bar Chart

Tiene demasiados datos, por lo que el eje Y no cabe en el espacio o no es legible.
Necesita un análisis detallado de series de tiempo; considere un Gráfico de líneas con una serie de tiempo para este tipo de datos.

Bar Chart Data Structure:

La fuente de datos debe ser una matriz o una lista de elementos de datos.
La fuente de datos debe contener al menos un elemento de datos.
La lista debe contener al menos una columna de datos (cadena o fecha y hora).
La lista debe contener al menos una columna de datos numéricos.

Angular Bar Chart with Single Series

Gráfico de barras pertenece a un grupo de series de categorías y se representa utilizando una colección de rectángulos que se extienden de izquierda a derecha del gráfico hacia los valores de los puntos de datos. Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a un IgxBarSeriesComponent, como se muestra en el siguiente ejemplo:

Angular Bar Chart with Multiple Series

El Gráfico de barras puede representar varias barras por categoría con fines de comparación. En este ejemplo, el Gráfico de barras compara los ingresos de taquilla entre franquicias de películas populares. Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a múltiples IgxBarSeriesComponent, como se muestra en el siguiente ejemplo:

Angular Bar Chart Styling

Se puede aplicar estilo al Gráfico de barras y permite utilizar valores de anotación para cada barra, por ejemplo, para demostrar comparaciones de porcentajes. Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a un IgxBarSeriesComponent y agregando un IgxCalloutLayerComponent, como se muestra en el siguiente ejemplo:

Angular Stacked Bar Chart

Un Gráfico de barras apiladas, o gráfico de barras apiladas, es un tipo de gráfico de categorías que se utiliza para comparar la composición de diferentes categorías de datos mostrando fragmentos de diferentes tamaños en las barras horizontales del gráfico. La longitud de cada barra, o pila de fragmentos, es proporcional a su valor total.

El Gráfico de barras apiladas se diferencia del Gráfico de barras en que los puntos de datos que representan sus datos se apilan uno al lado del otro horizontalmente para agrupar visualmente sus datos. Cada pila puede contener valores tanto positivos como negativos. Todos los valores positivos se agrupan en el lado positivo del eje X y todos los valores negativos se agrupan en el lado negativo del eje X.

Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a un IgxStackedBarSeriesComponent, como se muestra en el siguiente ejemplo:

Angular Stacked 100% Bar Chart

El Gráfico de barras Angular apiladas 100% es idéntico al Gráfico de barras Angular apiladas en todos los aspectos excepto en el tratamiento de los valores en el eje X (etiquetas inferiores del gráfico). En lugar de presentar una representación directa de los datos, el gráfico de 100 barras apiladas presenta los datos en términos de porcentaje de la suma de todos los valores en un punto de datos.

Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a un IgxStacked100BarSeriesComponent, como se muestra en el siguiente ejemplo:

Additional Resources

Puede encontrar más información sobre tipos de gráficos relacionados en estos temas:

API References

La siguiente tabla enumera los miembros de API mencionados en las secciones anteriores: