Gráfico de Nightingale: Proporciones de Rosa Polar y Ciclos Radiales

Cuando se presentan datos cíclicos o proporciones categóricas visualmente impactantes, el Gráfico de Nightingale (también conocido como gráfico de Rosa Polar o gráfico de Coxcomb) ofrece una estructura visual convincente. Creado por Florence Nightingale para representar datos de salud pública, este gráfico codifica los valores de datos utilizando la longitud del radio del sector en lugar del ángulo. Al mantener los ángulos de los sectores iguales mientras se extienden sus longitudes hacia afuera, los gráficos de Nightingale transforman métricas cíclicas o categóricas en diseños radiales distintivos y de alto impacto.

La mecánica de los gráficos de Nightingale

En Apache ECharts, un gráfico de Nightingale utiliza el tipo estándar 'pie' de serie configurado con la propiedad roseType propiedad. Establecer roseType: 'radius' indica al motor dividir el círculo en segmentos angulares iguales mientras se ajusta el radio exterior de cada sector según su valor numérico.

1. Configuración esencial

Para construir un gráfico de Nightingale básico, establezca roseType: 'radius' dentro de un objeto 'pie' de serie y proporcione su conjunto de datos:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    leyenda: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Modo Radio',
            type: 'pie',
            radius: [20, 140],
            center: ['50%', '55%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 5
            },
            data: [
                { value: 40, name: 'Rosa 1' },
                { value: 38, name: 'Rosa 2' },
                { value: 32, name: 'Rosa 3' },
                { value: 30, name: 'Rosa 4' },
                { value: 28, name: 'Rosa 5' },
                { value: 26, name: 'Rosa 6' },
                { value: 22, name: 'Rosa 7' },
                { value: 18, name: 'Rosa 8' }
            ]
        }
    ]
};

Técnicas estructurales avanzadas

Puedes personalizar el modo de visualización del gráfico de rosa para variar simultáneamente el ángulo y el radio, o vaciar el centro para crear un híbrido de rosa-donut.

1. Tipo de Rosa de Área (Ángulos iguales frente a ángulos escalados)

Establecer roseType: 'area' mantiene los ángulos de los sectores iguales en todas las categorías mientras se escala el área de la porción en lugar de solo el radio:

option = {
    leyenda: {
        top: 'abajo'
    },
    series: [
        {
            name: 'Modo Área',
            type: 'pie',
            radio: [30, 120],
            center: ['50%', '45%'],
            tipoRoseta: 'area',
            data: [
                { value: 30, name: 'Marketing' },
                { value: 28, name: 'Ventas' },
                { value: 26, name: 'Desarrollo' },
                { value: 24, name: 'Soporte' },
                { value: 22, name: 'Diseño' },
                { value: 20, name: 'Operaciones' }
            ]
        }
    ]
};

Ajuste fino del diseño y estilo

Aplicar puntas exteriores redondeadas y bordes distintivos da a los gráficos de rosas polares una apariencia refinada en las páginas web modernas.

1. Puntas redondeadas de rosas y bordes de segmentos

Utilice borderRadiusy bordes de contorno blancos para separar limpiamente los pétalos radiales adyacentes:

option = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Impacto del Departamento',
            type: 'pie',
            radio: [40, 150],
            center: ['50%', '50%'],
            tipoRoseta: 'radio',
            itemStyle: {
                borderRadius: 8,
                borderColor: '#ffffff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            data: [
                { value: 1048, name: 'Ingeniería' },
                { value: 735, name: 'Producto' },
                { value: 580, name: 'Marketing' },
                { value: 484, name: 'Ventas' },
                { value: 300, name: 'Soporte' }
            ]
        }
    ]
};

Prácticas recomendadas estratégicas

• Tenga en cuenta la distorsión visual: Debido a que el área escala exponencialmente con el radio, los valores más grandes aparecen visualmente dominantes en los gráficos de rosas en comparación con los gráficos de barras estándar. Úselos cuando el impacto y la participación visual tienen prioridad.
• Mantenga un agujero en el radio interior: Siempre establezca un radio interior (por ejemplo, [20, 140]) para que los sectores pequeños no se reduzcan a un punto agudo ilegible en el centro absoluto.
• Coloque las leyendas fuera del centro: Coloque las leyendas en el borde superior o inferior para evitar que los pétalos radiales se solapen con el texto mientras se extienden hacia afuera.