Wykres Nightingale: proporcje rosetki biegunowej i cykle promieniste

Podczas prezentowania danych cyklicznych lub wizualnie uderzających proporcji kategorycznych, Wykres Nightingale (znany również jako wykres rosetki biegunowej lub wykres Coxomba) oferuje przekonującą strukturę wizualną. Stworzony przez Florence Nightingale w celu mapowania danych dotyczących zdrowia publicznego, ten wykres koduje wartości danych za pomocą długości promienia sektora, a nie rozpiętości kąta. Utrzymując identyczne kąty odcinków, jednocześnie rozszerzając długości sektorów na zewnątrz, wykresy Nightingale przekształcają dane cykliczne lub kategoryczne w wyraźne, wysokowydajne projekty promieniste.

Zasady działania wykresów Nightingale

W Apache ECharts wykres Nightingale używa standardowego 'pie' typu serii skonfigurowanego z użyciem roseType właściwości. Ustawienie roseType: 'radius' informuje silnik, aby podzielić okrąg na równe odcinki kątowe, jednocześnie dopasowując długość promienia zewnętrznego każdego sektora do jego wartości liczbowej.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres Nightingale, ustaw roseType: 'radius' wewnątrz 'pie' obiektu serii i podaj swój zestaw danych:

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

Zaawansowane techniki strukturalne

Można dostosować tryb wyświetlania wykresu rosetki, aby jednocześnie zmieniać kąt i promień, albo wykonać puste wnętrze, tworząc hybrydę rosetki i donatu.

1. Typ rosetki powierzchniowej (równe kąty vs. skalowane kąty)

Ustawienie roseType: 'area' utrzymuje równe kąty sektorów we wszystkich kategoriach, jednocześnie skalując powierzchnię odcinka, a nie tylko promień:

option = {
    legend: {
        top: 'dolny'
    },
    series: [
        {
            name: 'Tryb obszaru',
            type: 'pie',
            radius: [30, 120],
            center: ['50%', '45%'],
            roseType: 'area',
            data: [
                { value: 30, name: 'Marketing' },
                { value: 28, name: 'Sprzedaż' },
                { value: 26, name: 'Rozwój' },
                { value: 24, name: 'Wsparcie' },
                { value: 22, name: 'Projektowanie' },
                { value: 20, name: 'Działanie' }
            ]
        }
    ]
};

Dokładna dostosowanie układu i stylizacji

Zastosowanie zaokrąglonych zewnętrznych końców i wyraźnych krawędzi nadaje wykresom w formie różanego półkola wyrafinowany wygląd na nowoczesnych stronach internetowych.

1. Zaokrąglone końce róż i krawędzie odcinków

Użyj borderRadiusi białe obramowania, aby wyraźnie oddzielić sąsiednie promieniste płatki:

option = {
    tooltip: {
        trigger: 'element'
    },
    series: [
        {
            name: 'Wpływ działów',
            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: 'Inżynieria' },
                { value: 735, name: 'Produkt' },
                { value: 580, name: 'Marketing' },
                { value: 484, name: 'Sprzedaż' },
                { value: 300, name: 'Wsparcie' }
            ]
        }
    ]
};

Strategiczne najlepsze praktyki

• Zwróć uwagę na zniekształcenie wizualne: Ponieważ pole powierzchni rośnie wykładniczo wraz z promieniem, większe wartości wydają się wizualnie dominować na wykresach w formie różanego półkola w porównaniu do standardowych wykresów słupkowych. Używaj ich, gdy priorytetem są wpływ i wizualna zaangażowanie.
• Zachowaj otwór w środku promienia: Zawsze ustaw promień wewnętrzny (np. [20, 140]), aby małe sektory nie miały się zmniejszać do niewyraźnego ostrego punktu w absolutnym środku.
• Umieść legendy poza środkiem: Umieść legende na górze lub dole, aby zapobiec nakładaniu się płatków promienistych na tekst podczas rozszerzania się na zewnątrz.