Wykres skrzynkowy: rozkład statystyczny i wykrywanie wartości odstających

Gdy musisz przeanalizować rozrzut danych i zidentyfikować nietypowe punkty danych w różnych grupach, standardowym narzędziem wizualnym statystycznym jestWykres skrzynkowy (lub wykres skrzynkowy z wąsami) jest standardowym narzędziem wizualnym statystycznym. Podsumowując dane ciągłe na pięciu kluczowych liczbach — Minimum, pierwszy kwartyl (Q1), mediana (Q2), trzeci kwartyl (Q3) i maksimum — wykresy skrzynkowe ujawniająskośność, zróżnicowanie i skrajne wartości odstające na pierwszy rzut oka, nie zasłaniając ekranu danymi surowymi.

Zasady działania wykresów skrzynkowych

W Apache ECharts, skrzynki statystyczne są renderowane przy użyciutype: 'boxplot'. Każdy wpis w zestawie danych oczekuje tablicy liczbowej pięciu elementów ułożonych według kolejności[Minimum, Q1, Mediana, Q3, Maksimum]. ECharts zawiera również wbudowane narzędzie do przygotowania danych, które pozwala obliczyć te granice statystyczne bezpośrednio z liczb surowych.

1. Podstawowa konfiguracja

Aby stworzyć podstawowy wykres skrzynkowy, przypisz kategorie do osi X i podaj obliczone tablice pięciu liczb w danych serii:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Kategoria 1', 'Kategoria 2', 'Kategoria 3', 'Kategoria 4', 'Kategoria 5']
    },
    yAxis: {
        type: 'value',
        name: 'Wartość rozkładu'
    },
    series: [
        {
            name: 'Wykres skrzynkowy',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Min, Q1, Mediana, Q3, Max]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Zaawansowane techniki strukturalne

Możesz nakładać punkty rozrzutu wartości odstających lub tworzyć poziome wykresy skrzynkowe dla kategorii o długich nazwach.

1. Ułożenie poziomego wykresu skrzynkowego

UstawyAxis jako skalę kategorii ixAxis jako skalę wartości liczbowych, aby obrócić wykresy skrzynkowe poziomo dla lepszej czytelności etykiet:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Serwer Alpha', 'Serwer Beta', 'Serwer Gamma']
    },
    series: [
        {
            name: 'Opóźnienie (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
            }
        }
    ]
};

Dostosowanie układu i stylizacji

Niestandardowe kolory pudełek, szerokość wąsów i formatowanie linii mediany poprawiają wyraźność wizualną w złożonych układach paneli kontrolnych.

1. Wypełnienie pudełka i stylizacja wartości odstających

Stylizuj obramowania pudełek, kolory wypełnienia oraz właściwości linii wąsów, aby dopasować je do projektu interfejsu:

option = {
    siatka: {
        lewy: '10%',
        prawy: '10%',
        zawieraEtykietę: true
    },
    ośX: {
        typ: 'kategoria',
        dane: ['Grupa A', 'Grupa B', 'Grupa C']
    },
    ośY: {
        typ: 'wartość'
    },
    serie: [
        {
            nazwa: 'Rozkład wyników',
            typ: 'skrzynkowy',
            szerokoscSkrzynki: ['20%', '50%'], // Granice szerokości skrzynki odpowiednio do rozmiaru
            stylElementu: {
                kolor: '#f0fdf4',
                kolorObramowania: '#16a34a',
                gruboscObramowania: 2
            },
            dane: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Strategiczne najlepsze praktyki

• Sprawdź ponownie kolejność podsumowania:Upewnij się, że wartości tablicy są ułożone w ścisłej kolejności:[Minimum, Q1, Mediana, Q3, Maksimum]. Niepoprawna kolejność spowoduje problemy z wyświetlaniem.
• Nakładanie wartości odstających za pomocą serii rozproszenia: Użyj drugorzędnejrozproszeniaserii nałożonej na skrzynkowy, aby wyświetlić ekstremalne wartości odstające statystycznie jako osobne punkty danych.
• Dostosuj wypełnienie siatki: Upewnij się, że jest odpowiedniesiatka.dolnylubsiatka.lewywypełnienie, aby długie nazwy kategorii nie nakładały się na linie wąsów.