Gráfico Nightingale: Proporções de Rosa Polar e Ciclos Radiais

Ao apresentar dados cíclicos ou proporções categóricas visualmente impactantes, o Gráfico Nightingale (também conhecido como Gráfico de Rosa Polar ou Gráfico de Coxcomb) oferece uma estrutura visual convincente. Criado por Florence Nightingale para mapear dados de saúde pública, este gráfico codifica valores de dados usando o comprimento do raio do setor, em vez do ângulo do setor. Mantendo os ângulos das fatias idênticos enquanto estende os comprimentos dos setores para fora, os gráficos Nightingale transformam métricas cíclicas ou categóricas em designs radiais distintos e de alto impacto.

Os Mecanismos dos Gráficos Nightingale

No Apache ECharts, um gráfico Nightingale utiliza o tipo padrão 'pie' de série configurado com o roseType propriedade. Definir roseType: 'radius' instrui o motor a dividir o círculo em segmentos angulares iguais, enquanto ajusta o raio externo de cada setor com base em seu valor numérico.

1. Configuração Básica

Para construir um gráfico Nightingale básico, defina roseType: 'radius' dentro de um 'pie' objeto de série e forneça seus dados:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Modo Raio',
            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 Estruturais Avançadas

Você pode personalizar o modo de exibição do gráfico de rosa para variar simultaneamente ângulo e raio, ou deixar o centro vazio para criar um híbrido de rosa-dona.

1. Tipo de Rosa Área (Ângulos Iguais vs. Ângulos Escalados)

Definir roseType: 'area'mantém os ângulos dos setores iguais em todas as categorias, enquanto escala a área da fatia em vez de apenas o raio:

option = {
    legenda: {
        topo: 'inferior'
    },
    série: [
        {
            nome: 'Modo Área',
            tipo: 'pizza',
            raio: [30, 120],
            centro: ['50%', '45%'],
            tipoRosa: 'área',
            dados: [
                { valor: 30, nome: 'Marketing' },
                { valor: 28, nome: 'Vendas' },
                { valor: 26, nome: 'Desenvolvimento' },
                { valor: 24, nome: 'Suporte' },
                { valor: 22, nome: 'Design' },
                { valor: 20, nome: 'Operações' }
            ]
        }
    ]
};

Ajuste fino do layout e do estilo

Aplicar pontas externas arredondadas e bordas distintas dá às gráficas de rosa polar uma aparência refinada em páginas da web modernas.

1. Pontas arredondadas da rosa e bordas dos segmentos

Use borderRadiuse bordas de contorno brancas para separar limpidamente os pétalos radiais adjacentes:

option = {
    tooltip: {
        acionador: 'item'
    },
    série: [
        {
            nome: 'Impacto do Departamento',
            tipo: 'pizza',
            raio: [40, 150],
            centro: ['50%', '50%'],
            tipoRosa: 'raio',
            estiloItem: {
                borderRadius: 8,
                corBorda: '#ffffff',
                larguraBorda: 2
            },
            rótulo: {
                exibir: true,
                formatador: '{b}: {c}'
            },
            dados: [
                { valor: 1048, nome: 'Engenharia' },
                { valor: 735, nome: 'Produto' },
                { valor: 580, nome: 'Marketing' },
                { valor: 484, nome: 'Vendas' },
                { valor: 300, nome: 'Suporte' }
            ]
        }
    ]
};

Melhores Práticas Estratégicas

• Tenha cuidado com a distorção visual:Como a área escala exponencialmente com o raio, valores maiores aparecem visualmente dominantes nas gráficas de rosa em comparação com gráficos de barras padrão. Use-as quando o impacto e o envolvimento visual têm prioridade.
• Mantenha um buraco no raio interno: Sempre defina um raio interno (por exemplo, [20, 140]) para que setores pequenos não se reduzam a um ponto agudo ilegível no centro absoluto.
• Posicione as legendas fora do centro: Posicione as legendas na borda superior ou inferior para evitar que os pétalos radiais sobreponham o texto à medida que se estendem para fora.