Biểu đồ hộp: Phân phối thống kê và phát hiện điểm ngoại lệ

Khi bạn cần phân tích độ phân tán dữ liệu và xác định các điểm dữ liệu bất thường trong các nhóm, thì Biểu đồ hộp (hay còn gọi là Biểu đồ hộp và dây chuyền) là công cụ trực quan thống kê tiêu chuẩn. Bằng cách tóm tắt dữ liệu liên tục thành năm số liệu chính—Giá trị nhỏ nhất, tứ phân vị thứ nhất (Q1), Trung vị (Q2), tứ phân vị thứ ba (Q3), và Giá trị lớn nhất—biểu đồ hộp cho thấy độ lệch, độ biến thiên và các điểm ngoại lệ cực đoan một cách nhanh chóng mà không làm rối mắt bằng dữ liệu thô.

Cơ chế của biểu đồ hộp

Trong Apache ECharts, các hộp thống kê được hiển thị bằng cách sử dụng type: 'boxplot'. Mỗi mục dữ liệu mong đợi một mảng số có 5 phần tử được sắp xếp theo thứ tự [Giá trị nhỏ nhất, Q1, Trung vị, Q3, Giá trị lớn nhất]. ECharts cũng bao gồm một công cụ chuẩn bị dữ liệu tích hợp để tính toán các giới hạn thống kê này trực tiếp từ các con số thô.

1. Cài đặt cơ bản

Để xây dựng một biểu đồ hộp cơ bản, hãy ánh xạ các danh mục dọc theo trục X và cung cấp các mảng tóm tắt 5 số đã tính toán bên trong dữ liệu chuỗi của bạn:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'category',
        data: ['Danh mục 1', 'Danh mục 2', 'Danh mục 3', 'Danh mục 4', 'Danh mục 5']
    },
    yAxis: {
        type: 'value',
        name: 'Giá trị phân bố'
    },
    series: [
        {
            name: 'Biểu đồ hộp',
            type: 'boxplot',
            data: [
                [655, 850, 940, 980, 1070], // [Nhỏ nhất, Q1, Trung vị, Q3, Lớn nhất]
                [760, 800, 845, 885, 960],
                [780, 840, 855, 880, 940],
                [720, 767, 815, 865, 920],
                [890, 920, 950, 970, 990]
            ]
        }
    ]
};

Các kỹ thuật cấu trúc nâng cao

Bạn có thể chồng các điểm phân tán điểm ngoại lệ hoặc xây dựng biểu đồ hộp nằm ngang cho các danh mục có tên dài.

1. Bố cục biểu đồ hộp nằm ngang

Thiết lập yAxis làm thang danh mục và xAxis làm thang giá trị số để xoay biểu đồ hộp theo chiều ngang nhằm cải thiện khả năng đọc nhãn:

option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['Máy chủ Alpha', 'Máy chủ Beta', 'Máy chủ Gamma']
    },
    series: [
        {
            name: 'Độ trễ (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
            }
        }
    ]
};

Tinh chỉnh bố cục và định dạng

Màu sắc hộp tùy chỉnh, độ rộng dây chuyền và định dạng đường trung vị giúp phân biệt hình ảnh rõ ràng hơn trong các bố cục bảng điều khiển phức tạp.

1. Điền màu hộp tùy chỉnh và định dạng điểm ngoại lệ

Thiết lập viền hộp, màu điền và thuộc tính đường dây chuyền để phù hợp với thiết kế giao diện của bạn:

option = {
    grid: {
        left: '10%',
        right: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Nhóm A', 'Nhóm B', 'Nhóm C']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: 'Phân bố điểm số',
            type: 'boxplot',
            boxWidth: ['20%', '50%'], // Giới hạn độ rộng hộp linh hoạt
            itemStyle: {
                color: '#f0fdf4',
                borderColor: '#16a34a',
                borderWidth: 2
            },
            data: [
                [40, 55, 68, 82, 95],
                [50, 62, 75, 88, 98],
                [30, 45, 58, 70, 85]
            ]
        }
    ]
};

Các thực hành tốt chiến lược

• Kiểm tra lại thứ tự tóm tắt:Xác minh rằng các giá trị mảng tuân theo thứ tự nghiêm ngặt:[Tối thiểu, Q1, Trung vị, Q3, Tối đa]. Thứ tự sai sẽ gây ra lỗi hiển thị.
• Ghép điểm ngoại lệ với chuỗi phân tán:Sử dụng một chuỗi phụphân tán trên nền biểu đồ hộp để hiển thị các điểm ngoại lệ thống kê cực đoan như các điểm dữ liệu riêng lẻ.
• Điều chỉnh khoảng cách lề lưới:Đảm bảo đủgrid.bottomhoặcgrid.left khoảng cách để tên danh mục dài không va chạm với các đường dây chuyền.