Диаграмма коробки: статистическое распределение и выявление выбросов

Когда вам нужно проанализировать разброс данных и выявить необычные точки данных по группам, стандартным статистическим визуальным инструментом являетсяДиаграмма коробки (или диаграмма «ящик с усами») является стандартным статистическим визуальным инструментом. Сводя непрерывные данные к пяти ключевым числам — минимальному значению, первому квартилю (Q1), медиане (Q2), третьему квартилю (Q3) и максимальному значению — диаграммы коробок позволяют визуализироватьасимметрию, изменчивость и экстремальные выбросы на первый взгляд, не загромождая экран исходными данными.

Принцип работы диаграмм коробок

В Apache ECharts статистические коробки отображаются с помощьюtype: 'boxplot'. Каждая запись набора данных ожидает массив из пяти числовых элементов, упорядоченных как[Минимум, Q1, Медиана, Q3, Максимум]. ECharts также включает встроенное средство подготовки данных для прямого вычисления этих статистических границ из исходных чисел.

1. Основная настройка

Чтобы построить базовую диаграмму коробки, отобразите категории по оси X и предоставьте рассчитанные массивы пяти числовых итогов в данных серии:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Категория 1', 'Категория 2', 'Категория 3', 'Категория 4', 'Категория 5']
    },
    yAxis: {
        type: 'value',
        name: 'Значение распределения'
    },
    series: [
        {
            name: 'Диаграмма коробки',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Минимум, Q1, Медиана, Q3, Максимум]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Расширенные структурные методы

Вы можете наложить точки рассеяния выбросов или построить горизонтальные диаграммы коробок для категорий с длинными именами.

1. Горизонтальная компоновка диаграммы коробки

УстановитеyAxis как шкалу категорий иxAxis как шкалу числовых значений, чтобы повернуть диаграммы коробок горизонтально для лучшей читаемости меток:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Сервер Альфа', 'Сервер Бета', 'Сервер Гамма']
    },
    series: [
        {
            name: 'Задержка (мс)',
            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
            }
        }
    ]
};

Настройка макета и стилей

Настроенные цвета коробок, ширина усов и форматирование линии медианы улучшают визуальное различие на сложных макетах панелей управления.

1. Настройка заливки коробок и стилизация выбросов

Настройте границы коробок, цвета заливки и свойства линий усов, чтобы они соответствовали вашему дизайну интерфейса:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Группа A', 'Группа B', 'Группа C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Распределение оценок',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Границы адаптивной ширины коробки
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Стратегические лучшие практики

• Проверьте порядок итоговых значений: Убедитесь, что значения массива следуют строгому порядку:[Минимум, Q1, Медиана, Q3, Максимум]. Неправильный порядок вызовет артефакты отображения.
• Наложите выбросы с помощью серии рассеяния: Используйте вторичнуюсерия рассеяния серию поверх диаграммы коробок, чтобы отобразить экстремальные статистические выбросы как отдельные точки данных.
• Настройте отступы сетки: Убедитесь, что достаточноотступов grid.bottom илиотступов grid.left чтобы длинные названия категорий не пересекались с линиями усов.