PieGraph

El componente PieGraph muestra una fracción en forma de gráfico circular (pastel), representando la parte entera y fraccionaria con segmentos de color. Este componente permite visualizar fracciones circulares, donde las partes completas se representan con círculos completos, y la fracción parcial se divide en segmentos de pastel según el numerador y el denominador proporcionados.

Funcionamiento

1. Círculos Completos: Los círculos correspondientes al valor de whole estarán completamente llenos, representando la parte entera de la fracción.

2. Círculo Parcial: El último círculo muestra la fracción parcial. Está dividido en segmentos según el denominator, y el numerator define cuántos de estos segmentos están coloreados.

3. Colores Personalizables: Puedes personalizar el color de los bordes y del relleno de los segmentos. Si no se especifican, el componente utiliza colores por defecto.

4. Tamaño Ajustable: El radio de cada círculo se puede modificar con el prop radius.

Props

• whole (opcional): Número entero que representa la cantidad de círculos completos (parte entera de la fracción).

• numerator: Numerador de la fracción que determina la cantidad de segmentos coloreados en el círculo parcial.

• denominator: Denominador de la fracción que define el número total de segmentos en el círculo parcial.

• radius (opcional): Radio de cada círculo en el gráfico de pastel. El valor predeterminado es 100.

• color (opcional): Objeto para definir los colores de los bordes y el relleno de los segmentos.

  • border: Color del borde de cada círculo.

  • fill: Color de los segmentos llenos en el círculo.

• containerStyles (opcional): Estilos personalizados para el contenedor del gráfico. Acepta cualquier estilo compatible con ViewStyle en React Native.

Ejemplo