Boxplot-Diagramm: Statistische Verteilung und Ausreißererkennung

Wenn Sie die Datenstreuung analysieren und ungewöhnliche Datenpunkte über Gruppen hinweg identifizieren müssen, ist das Boxplot-Diagramm (oder Box-and-Whisker-Diagramm) das Standardwerkzeug der statistischen Visualisierung. Durch die Zusammenfassung kontinuierlicher Daten in fünf Schlüsselzahlen – Minimum, Erstes Quartil (Q1), Median (Q2), Drittes Quartil (Q3) und Maximum – zeigen Boxplot-Diagramme Schiefheit, Variabilität und extreme Ausreißer auf einen Blick, ohne den Bildschirm mit Rohdaten zu überladen.

Die Funktionsweise von Boxplot-Diagrammen

In Apache ECharts werden statistische Boxen mit type: 'boxplot'. Jeder Datensatz-Eintrag erwartet ein 5-elementiges numerisches Array in der Reihenfolge [Minimum, Q1, Median, Q3, Maximum]. ECharts verfügt außerdem über ein integriertes Werkzeug zur Datenbereinigung, das diese statistischen Grenzen direkt aus Rohzahlen berechnet.

1. Grundlegende Einrichtung

Um ein grundlegendes Boxplot zu erstellen, ordnen Sie Kategorien entlang der X-Achse zu und geben Sie berechnete 5-Zahlen-Zusammenfassungs-Arrays innerhalb Ihrer Seriendaten an:

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

Erweiterte strukturelle Techniken

Sie können Ausreißer-Streudiagramme überlagern oder horizontale Boxplots für Kategorien mit langen Namen erstellen.

1. Horizontales Boxplot-Layout

Legen Sie yAxis als Kategorien-Skala und xAxis als numerische Wert-Skala fest, um Boxplots horizontal zu drehen, um die Beschriftungslesbarkeit zu verbessern:

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

Feinabstimmung von Layout und Stil

Benutzerdefinierte Boxfarben, Whisker-Breiten und Formatierung der Medianlinie verbessern die visuelle Unterscheidbarkeit in komplexen Dashboard-Layouts.

1. Benutzerdefinierte Füllung der Box und Darstellung von Ausreißern

Stile Box-Ränder, Füllfarben und Whisker-Linie-Eigenschaften, um sie an Ihr Schnittstellen-Design anzupassen:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Gruppe A', 'Gruppe B', 'Gruppe C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Score-Verteilung',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Responsive box width boundaries
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Strategische Best Practices

• Überprüfen Sie die Reihenfolge der Zusammenfassung:Stellen Sie sicher, dass die Array-Werte der strengen Reihenfolge folgen:[Minimum, Q1, Median, Q3, Maximum]. Falsche Reihenfolge führt zu Darstellungsfehlern.
• Überlagern Sie Ausreißer mit einer Streuungsreihe:Verwenden Sie eine sekundäreStreuungReihe über der Boxplot-Darstellung, um extreme statistische Ausreißer als einzelne Datenpunkte darzustellen.
• Rastereinrückung anpassen:Stellen Sie sicher, dass ausreichendgrid.bottomodergrid.leftEinrückung vorhanden ist, damit lange Kategorienamen nicht mit Whisker-Linien kollidieren.