Grafik Boxplot: Distribusi Statistik dan Deteksi Pencilan

Ketika Anda perlu menganalisis penyebaran data dan mengidentifikasi titik data yang tidak biasa di berbagai kelompok, Grafik Boxplot (atau Grafik Kotak dan Sirip) adalah alat visual statistik standar. Dengan merangkum data kontinu menjadi lima angka kunci—Nilai Minimum, Kuartil Pertama (Q1), Median (Q2), Kuartil Ketiga (Q3), dan Nilai Maksimum—grafik boxplot mengungkapkan kecondongan, keragaman, dan pencilan ekstrem secara langsung tanpa memenuhi layar dengan data mentah.

Mekanisme Grafik Boxplot

Di Apache ECharts, kotak statistik dirender menggunakan type: 'boxplot'. Setiap entri dataset mengharapkan array numerik 5 elemen yang diurutkan sebagai [Minimum, Q1, Median, Q3, Maksimum]. ECharts juga menyertakan alat persiapan data bawaan untuk menghitung batas statistik ini langsung dari angka mentah.

1. Pengaturan Dasar

Untuk membuat boxplot dasar, peta kategori sepanjang sumbu X dan sediakan array ringkasan 5 angka yang telah dihitung di dalam data seri Anda:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Kategori 1', 'Kategori 2', 'Kategori 3', 'Kategori 4', 'Kategori 5']
    },
    yAxis: {
        type: 'value',
        name: 'Nilai Distribusi'
    },
    series: [
        {
            name: 'Boxplot',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Min, Q1, Median, Q3, Maks]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Teknik Struktural Lanjutan

Anda dapat menambahkan titik-titik pencar pencilan atau membuat boxplot horizontal untuk kategori dengan nama yang panjang.

1. Tata Letak Boxplot Horizontal

Atur yAxis sebagai skala kategori dan xAxis sebagai skala nilai numerik untuk membalik boxplot secara horizontal agar label lebih mudah dibaca:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Server Alpha', 'Server Beta', 'Server Gamma']
    },
    series: [
        {
            name: 'Latensi (ms)',
            type: 'boxplot',
            data: [
                [12, 18, 22, 28, 35],
                [15, 24, 30, 38, 48],
                [8, 12, 15, 20, 27]
            ],
            itemStyle: {
                color: '#e0f2fe',
                borderColor: '#0284c7',
                borderWidth: 2
            }
        }
    ]
};

Penyesuaian Tata Letak dan Gaya

Warna kotak khusus, lebar garis kumuh, dan format garis median meningkatkan perbedaan visual di seluruh tata letak dasbor yang kompleks.

1. Isi Kotak Khusus dan Gaya Pengecualian

Gaya batas kotak, warna isi, dan sifat garis kumuh agar sesuai dengan desain antarmuka Anda:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Kelompok A', 'Kelompok B', 'Kelompok C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Distribusi Skor',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Batas lebar kotak responsif
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Praktik Terbaik Strategis

• Periksa Kembali Urutan Ringkasan:Verifikasi bahwa nilai array mengikuti urutan ketat:[Minimum, Q1, Median, Q3, Maksimum]. Pengurutan yang salah akan menyebabkan gangguan tampilan.
• Tumpang tindihkan Pengecualian dengan Seri Titik Sebar:Gunakan seri sekundertitik sebar seri di atas kotak plot untuk menampilkan outlier statistik ekstrem sebagai titik data individu.
• Sesuaikan Padding Grid:Pastikan cukupgrid.bawah atau grid.kiri padding agar nama kategori panjang tidak bertabrakan dengan garis kumuh.