Grafik Nightingale: Proporsi Mawar Polar dan Siklus Radial

Ketika menyajikan data siklikal atau proporsi kategorikal yang menarik secara visual, Grafik Nightingale (juga dikenal sebagai Grafik Mawar Polar atau Grafik Coxcomb) menawarkan struktur visual yang kuat. Dibuat oleh Florence Nightingale untuk memetakan data kesehatan masyarakat, grafik ini mengkode nilai data menggunakan panjang jari-jari sektor alih-alih rentang sudut. Dengan menjaga sudut potongan tetap sama sambil memperpanjang panjang sektor ke luar, grafik Nightingale mengubah metrik siklikal atau kategorikal menjadi desain radial yang jelas dan berdampak tinggi.

Mekanisme Grafik Nightingale

Di Apache ECharts, grafik Nightingale menggunakan jenis seri standar 'pie' tipe seri yang dikonfigurasi dengan roseType properti. Mengatur roseType: 'radius' memberi instruksi kepada mesin untuk membagi lingkaran menjadi segmen sudut yang sama sambil menyesuaikan jari-jari luar setiap sektor berdasarkan nilai numeriknya.

1. Pengaturan Dasar

Untuk membuat grafik Nightingale dasar, atur roseType: 'radius' di dalam 'pie' objek seri dan berikan dataset Anda:

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

Teknik Struktural Lanjutan

Anda dapat menyesuaikan mode tampilan grafik mawar agar sudut dan radius berubah secara bersamaan, atau membuat bagian tengah kosong untuk menghasilkan grafik hibrida mawar-donat.

1. Jenis Mawar Area (Sudut Sama vs. Sudut yang Diskala)

Mengatur roseType: 'area'menjaga sudut sektor tetap sama di semua kategori sambil menyesuaikan luas potongan alih-alih hanya jari-jari:

option = {
    legend: {
        top: 'bawah'
    },
    series: [
        {
            name: 'Mode Area',
            type: 'pie',
            radius: [30, 120],
            center: ['50%', '45%'],
            roseType: 'area',
            data: [
                { value: 30, name: 'Pemasaran' },
                { value: 28, name: 'Penjualan' },
                { value: 26, name: 'Pengembangan' },
                { value: 24, name: 'Dukungan' },
                { value: 22, name: 'Desain' },
                { value: 20, name: 'Operasi' }
            ]
        }
    ]
};

Penyesuaian Layout dan Gaya

Menerapkan ujung luar yang melengkung dan batas yang jelas memberikan tampilan yang halus pada grafik mawar polar di halaman web modern.

1. Ujung Mawar yang Melengkung dan Batas Segmen

Gunakan borderRadiusdan batas outline putih untuk memisahkan kelopak radial yang bersebelahan secara bersih:

option = {
    tooltip: {
        trigger: 'item'
    },
    series: [
        {
            name: 'Dampak Departemen',
            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: 'Teknik' },
                { value: 735, name: 'Produk' },
                { value: 580, name: 'Pemasaran' },
                { value: 484, name: 'Penjualan' },
                { value: 300, name: 'Dukungan' }
            ]
        }
    ]
};

Praktik Terbaik Strategis

• Perhatikan Distorsi Visual:Karena area meningkat secara eksponensial seiring radius, nilai-nilai yang lebih besar tampak dominan secara visual pada grafik mawar dibandingkan grafik batang standar. Gunakan mereka ketika dampak dan keterlibatan visual menjadi prioritas.
• Tetapkan lubang radius dalam:Selalu atur radius dalam (misalnya, [20, 140]) agar sektor-sektor kecil tidak menyusut menjadi titik tajam yang tidak terbaca di tengah mutlak.
• Letakkan Legenda di Luar Pusat:Letakkan legenda di tepi atas atau bawah untuk mencegah kelopak radial tumpang tindih teks saat menjulur ke luar.