Angular Gráfico de columnas

La Ignite UI for Angular, gráficos de columnas o Gráfico de barras verticales 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 columnas con anchos iguales pero diferentes. alturas. Estas columnas se extienden desde la parte inferior hasta la parte superior del gráfico hacia los valores de los puntos de datos. Este gráfico enfatiza la cantidad de cambio durante un período de tiempo o compara varios elementos. Gráfico de columnas es muy similar al Gráfico de barras excepto que Gráfico de columnas se representa en orientación vertical (arriba y abajo), mientras que Gráfico de barras tiene orientación horizontal (de izquierda a derecha) o una rotación de 90 grados en el sentido de las agujas del reloj.

Angular Column Chart Example

Puede crear Gráfico de columnas Angular en el control IgxCategoryChartComponent vinculando sus datos y configurando chartType en Column enum, como se muestra en el siguiente ejemplo:

Column Charts Recommendations

Column Charts Use Cases

Hay varios casos de uso para los gráficos de columnas. Cuando usted:

Necesidad de comparar valores de datos de categorías relacionadas.
Necesidad de comparar datos durante un período de tiempo.
Es necesario mostrar valores negativos y positivos en el mismo conjunto de datos.
Tenga un conjunto de datos grande y de gran volumen que se adapte bien a las interacciones de los gráficos, como panorámica, zoom y profundización.

Column Charts Best Practices:

Inicie siempre el eje Y (eje izquierdo o derecho) en 0 para que la comparación de datos sea precisa.
Ordene los datos de series temporales de izquierda a derecha.

When Not to Use Column Charts

Tienes muchas (más de 10 o 12) series de datos. Su objetivo es garantizar que el gráfico sea legible.

Column Charts Data Structure:

El modelo de datos debe contener al menos una propiedad numérica.
El modelo de datos puede contener una cadena de opciones o una propiedad de fecha y hora para las etiquetas.
La fuente de datos debe contener al menos un elemento de datos.

Angular Column Chart with Single Series

Gráfico de columnas pertenece a un grupo de series de categorías y se representa utilizando una colección de rectángulos que se extienden desde la parte inferior hasta la parte superior del gráfico hacia los valores de los puntos de datos.

Puede crear este tipo de gráfico en el control IgxCategoryChartComponent vinculando sus datos y estableciendo la propiedad chartType en el valor de Columna, como se muestra en el siguiente ejemplo:

Angular Column Chart with Multiple Series

El Gráfico de columnas puede representar varias columnas por categoría con fines de comparación. Puede crear este tipo de gráfico en el control IgxCategoryChartComponent vinculando sus datos y estableciendo la propiedad chartType en el valor de Columna, como se muestra en el siguiente ejemplo:

Angular Column Chart Styling

El Gráfico de columnas Angular tiene muchas opciones para diseñar y modificar la apariencia visual.

Puede crear este tipo de gráfico en el IgxCategoryChartComponent control enlazando los datos, como se muestra en el ejemplo siguiente:

Advanced Types of Column Charts

Las siguientes secciones explican tipos más avanzados de gráficos de columnas Angular que se pueden crear usando el control IgxDataChartComponent en lugar del control IgxCategoryChartComponent con API simplificada.

Angular Waterfall Chart

El gráfico en cascada pertenece a un grupo de gráficos de categorías y se representa mediante una colección de columnas verticales que muestran la diferencia entre puntos de datos consecutivos. Las columnas están codificadas por colores para distinguir entre cambios de valor positivos y negativos. El gráfico en cascada es similar en apariencia al Gráfico de columnas de rango, pero requiere solo una columna de datos numéricos en lugar de dos columnas para cada punto de datos.

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

Angular Stacked Column Chart

El Gráfico de columnas apiladas es similar al Gráfico de columnas de categorías en todos los aspectos, excepto que las series se representan una encima de la otra en lugar de estar a un lado. El Gráfico de columnas apiladas se utiliza para mostrar la comparación de resultados entre series. Cada fragmento apilado de la colección representa un elemento visual en cada pila. Cada pila puede contener valores tanto positivos como negativos. Todos los valores positivos se agrupan en el lado positivo del eje Y y todos los valores negativos se agrupan en el lado negativo del eje Y. El Gráfico de columnas apiladas utiliza los mismos conceptos de trazado de datos que el Gráfico de barras apiladas, pero los puntos de datos se apilan a lo largo de la línea vertical (eje Y) en lugar de a lo largo de la línea horizontal (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% Column Chart

El Gráfico de columnas apiladas al 100% es idéntico al Gráfico de columnas apiladas en todos los aspectos excepto en el tratamiento de los valores en el eje Y. En lugar de presentar una representación directa de los datos, el Gráfico de columnas 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:

Angular Range Column Chart

El Gráfico de columnas de rango Angular pertenece a un grupo de gráficos de rango y se representa utilizando rectángulos verticales que pueden aparecer en el medio del área de trazado del gráfico, en lugar de extenderse desde la parte inferior como el Gráfico de columnas de categorías tradicional. Este tipo de serie enfatiza la cantidad de cambio entre valores bajos y valores altos en el mismo punto de datos durante un período de tiempo o compara varios elementos. Los valores de rango se representan en el eje Y y las categorías se muestran en el eje X.

El Gráfico de columnas de rango es idéntico al Gráfico de áreas de rango (area-chart.md#angular-range-area-chart) en todos los aspectos excepto que los rangos se representan como un conjunto de columnas verticales en lugar de un área rellena.

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

Angular Radial Column Chart

El Gráfico de columnas radiales pertenece a un grupo de gráficos radiales y se visualiza mediante una colección de rectángulos que se extienden desde el centro del gráfico hacia las ubicaciones de los puntos de datos. Utiliza los mismos conceptos de trazado de datos que el Gráfico de columnas de categorías, pero envuelve los puntos de datos alrededor de un círculo en lugar de estirarlos horizontalmente.

Puede crear este tipo de gráfico en el control IgxDataChartComponent vinculando sus datos a un IgxRadialColumnSeriesComponent, 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:

Tipo de gráfico	Nombre del control	Miembros de la API
Columna	`IgxCategoryChartComponent`	`chartType` = Column
Columna Radial	`IgxDataChartComponent`	`IgxRadialColumnSeriesComponent`
Columna de rango	`IgxDataChartComponent`	`IgxRangeColumnSeriesComponent`
Columna apilada	`IgxDataChartComponent`	`IgxStackedColumnSeriesComponent`
Columna apilada al 100%	`IgxDataChartComponent`	`IgxStacked100ColumnSeriesComponent`
Cascada	`IgxDataChartComponent`	`IgxWaterfallSeriesComponent`