Diagram de Nightingale : proportions de rosace polaire et cycles radiaux

Lorsque l’on présente des données cycliques ou des proportions catégorielles visuellement frappantes, le Diagram de Nightingale (également connu sous le nom de diagramme de rosace polaire ou de diagramme de Coxcomb) offre une structure visuelle convaincante. Créé par Florence Nightingale pour cartographier des données de santé publique, ce diagramme encode les valeurs de données à l’aide de la longueur du rayon des secteurs plutôt que de l’angle. En maintenant les angles des tranches identiques tout en étirant les longueurs des secteurs vers l’extérieur, les diagrammes de Nightingale transforment les métriques cycliques ou catégorielles en designs radiaux distincts et percutants.

Les mécanismes des diagrammes de Nightingale

Dans Apache ECharts, un diagramme de Nightingale utilise le type de série standard 'pie' configuré avec la propriété roseType . Définir roseType: 'radius' indique au moteur de diviser le cercle en segments angulaires égaux tout en ajustant le rayon externe de chaque secteur en fonction de sa valeur numérique.

1. Configuration essentielle

Pour construire un diagramme de Nightingale de base, définissez roseType: 'radius' à l’intérieur d’un objet 'pie' de série et fournissez votre jeu de données :

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

Techniques structurelles avancées

Vous pouvez personnaliser le mode d’affichage du diagramme de rosace pour faire varier à la fois l’angle et le rayon simultanément, ou creuser le centre pour obtenir un hybride rosace-anneau.

1. Type de rosace par surface (angles égaux vs. angles échelonnés)

Définir roseType: 'area' maintient les angles des secteurs égaux pour toutes les catégories tout en échelonnant la surface des tranches plutôt que seulement le rayon :

option = {
    légende: {
        haut: 'bas'
    },
    séries: [
        {
            nom: 'Mode Zone',
            type: 'camembert',
            rayon: [30, 120],
            centre: ['50%', '45%'],
            typeRose: 'zone',
            données: [
                { valeur: 30, nom: 'Marketing' },
                { valeur: 28, nom: 'Ventes' },
                { valeur: 26, nom: 'Développement' },
                { valeur: 24, nom: 'Support' },
                { valeur: 22, nom: 'Conception' },
                { valeur: 20, nom: 'Opérations' }
            ]
        }
    ]
};

Affinage du layout et du style

Appliquer des extrémités extérieures arrondies et des bordures distinctes donne aux graphiques en rose polaire un aspect raffiné sur les pages web modernes.

1. Extrémités arrondies de la rose et bordures des segments

Utilisez borderRadiuset des bordures blanches en contour pour séparer nettement les pétales radiaux adjacents :

option = {
    infobulle: {
        déclencheur: 'élément'
    },
    séries: [
        {
            nom: 'Impact des départements',
            type: 'camembert',
            rayon: [40, 150],
            centre: ['50%', '50%'],
            typeRose: 'rayon',
            styleÉlément: {
                borderRadius: 8,
                couleurBordure: '#ffffff',
                épaisseurBordure: 2
            },
            étiquette: {
                afficher: true,
                formatteur: '{b}: {c}'
            },
            données: [
                { valeur: 1048, nom: 'Ingénierie' },
                { valeur: 735, nom: 'Produit' },
                { valeur: 580, nom: 'Marketing' },
                { valeur: 484, nom: 'Ventes' },
                { valeur: 300, nom: 'Support' }
            ]
        }
    ]
};

Meilleures pratiques stratégiques

• Faites attention à la distorsion visuelle :Parce que l’aire augmente de manière exponentielle avec le rayon, les grandes valeurs apparaissent visuellement dominantes sur les graphiques en rose par rapport aux diagrammes en barres standards. Utilisez-les lorsque l’impact et l’engagement visuel sont prioritaires.
• Gardez un trou au niveau du rayon intérieur : Définissez toujours un rayon intérieur (par exemple, [20, 140]) afin que les petits secteurs ne se réduisent pas à un point aigu illisible au centre absolu.
• Placez les légendes hors du centre :Placez les légendes au sommet ou au bord inférieur pour éviter que les pétales radiaux ne chevauchent le texte lorsqu’ils s’étendent vers l’extérieur.