React Gráfico de barras
El Ignite UI for React Gráfico de barras, el gráfico de barras o el Gráfico de barras horizontal , se encuentran 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 longitudes diferentes. Este gráfico es ideal para mostrar las 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 a Gráfico de columnas excepto que Gráfico de barras renderiza 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)
React Bar Chart Example
You can create React Bar Chart in the IgrDataChart control by binding your data sources to multiple IgrBarSeries, as shown in the example below:
Bar Chart Recommendations
Are React Bar Charts right for your project?
React Gráfico de barras incluye varias variantes en función de sus datos o de cómo desee contar la historia correcta con sus datos. Entre ellas se encuentran:
- 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.
React 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. Puedes crear este tipo de gráfico en elIgrDataChart control vinculando tus datos a unIgrBarSeries, como se muestra en el ejemplo siguiente:
React Bar Chart with Multiple Series
El Gráfico de barras puede renderizar varias barras por categoría para fines de comparación. En este ejemplo, la Gráfico de barras está comparando los ingresos de taquilla entre franquicias cinematográficas populares. Puedes crear este tipo de gráfico en elIgrDataChart control vinculando tus datos a variosIgrBarSeries, como se muestra en el ejemplo siguiente:
React Bar Chart Styling
El Gráfico de barras puede ser estilizado y permite usar valores de anotación para cada compás, por ejemplo, para demostrar comparaciones porcentuales. Puedes crear este tipo de gráfico en elIgrDataChart control vinculando tus datos aIgrBarSeries y añadiendo aIgrCalloutLayer, como se muestra en el ejemplo siguiente:
React 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.
Puedes crear este tipo de gráfico en elIgrDataChart control vinculando tus datos a unIgrStackedBarSeries, como se muestra en el ejemplo siguiente:
React Stacked 100% Bar Chart
El Gráfico de barras React apilado al 100% es idéntico al React Gráfico de barras apilado en todos los aspectos, excepto en su 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 de un punto de datos.
Puedes crear este tipo de gráfico en elIgrDataChart control vinculando tus datos a unIgrStacked100BarSeries, como se muestra en el ejemplo siguiente:
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: