Nightingale-Diagramm: Polarrosen-Anteile und radiale Zyklen

Beim Darstellen zyklischer Daten oder visuell auffälliger kategorialer Anteile bietet das Nightingale-Diagramm (auch bekannt als Polarrosen-Diagramm oder Coxcomb-Diagramm) bietet eine überzeugende visuelle Struktur. Erstellt von Florence Nightingale zur Darstellung öffentlicher Gesundheitsdaten, kodiert dieses Diagramm Datenwerte anhand der Länge des Sektorradius statt des Winkelumfangs. Indem die Winkel der Sektoren gleich bleiben, während die Länge der Sektoren nach außen verlängert wird, verwandelt das Nightingale-Diagramm zyklische oder kategoriale Kennzahlen in eindeutige, hochwirksame radiale Designs.

Die Funktionsweise von Nightingale-Diagrammen

In Apache ECharts verwendet ein Nightingale-Diagramm den Standard-'pie'Reihentyp, der mit dem roseTypeEigenschaft konfiguriert ist. Die Einstellung roseType: 'radius'weist die Engine an, den Kreis in gleich große Winkelabschnitte zu teilen, während die äußere Radiuslänge jedes Sektors anhand seines numerischen Wertes angepasst wird.

1. Grundlegende Einrichtung

Um ein grundlegendes Nightingale-Diagramm zu erstellen, legen Sie roseType: 'radius'innerhalb eines 'pie'Reihenobjekt fest und liefern Sie Ihre Datensammlung:

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b}: {c} ({d}%)'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: 'Radiusmodus',
            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' }
            ]
        }
    ]
};

Fortgeschrittene strukturelle Techniken

Sie können den Darstellungsmodus des Rosen-Diagramms anpassen, um sowohl Winkel als auch Radius gleichzeitig zu variieren, oder die Mitte auszuräumen, um ein Hybrid-Diagramm aus Rose und Donut zu erstellen.

1. Flächen-Rosen-Typ (gleiche Winkel vs. skalierte Winkel)

Durch die Einstellung roseType: 'area'werden die Sektorenwinkel in allen Kategorien gleich gehalten, während die Fläche der Sektoren statt nur des Radius skaliert wird:

option = {
    legend: {
        top: 'unten'
    },
    series: [
        {
            name: 'Bereichsmodus',
            type: 'pie',
            radius: [30, 120],
            center: ['50%', '45%'],
            roseType: 'area',
            data: [
                { value: 30, name: 'Marketing' },
                { value: 28, name: 'Vertrieb' },
                { value: 26, name: 'Entwicklung' },
                { value: 24, name: 'Support' },
                { value: 22, name: 'Design' },
                { value: 20, name: 'Betrieb' }
            ]
        }
    ]
};

Feinabstimmung von Layout und Gestaltung

Durch die Anwendung abgerundeter äußerer Spitzen und deutlicher Ränder erhält man für polar-rosenartige Diagramme ein verfeinertes Erscheinungsbild auf modernen Webseiten.

1. Abgerundete Rosenspitzen und Segmentränder

Verwenden Sie borderRadiusund weiße Umrandungsränder, um benachbarte radiäre Blütenblätter sauber zu trennen:

option = {
    tooltip: {
        trigger: 'element'
    },
    series: [
        {
            name: 'Abteilungseinfluss',
            type: 'pie',
            radius: [40, 150],
            center: ['50%', '50%'],
            roseType: 'radius',
            itemStyle: {
                borderRadius: 8,
                borderColor: '#ffffff',
                borderWidth: 2
            },
            label: {
                show: true,
                formatter: '{b}: {c}'
            },
            data: [
                { value: 1048, name: 'Ingenieurwesen' },
                { value: 735, name: 'Produkt' },
                { value: 580, name: 'Marketing' },
                { value: 484, name: 'Vertrieb' },
                { value: 300, name: 'Support' }
            ]
        }
    ]
};

Strategische Best Practices

• Achten Sie auf die visuelle Verzerrung:Da die Fläche exponentiell mit dem Radius wächst, erscheinen größere Werte in Rosendiagrammen im Vergleich zu Standardbalkendiagrammen visuell dominanter. Verwenden Sie sie, wenn Wirkung und visuelle Ansprache Vorrang haben.
• Halten Sie eine innere Radiuslücke bei: Legen Sie immer einen inneren Radius fest (z. B. [20, 140]), damit kleine Sektoren nicht zu einem unlesbaren spitzen Punkt im absoluten Zentrum zusammenschrumpfen.
• Legenden außerhalb der Mitte positionieren: Platzieren Sie Legenden am oberen oder unteren Rand, um zu verhindern, dass sich die radialen Blütenblätter beim Ausdehnen nach außen mit dem Text überschneiden.