箱形圖：統計分佈與異常值檢測

當您需要分析數據分散程度並識別各組之間的異常數據點時，箱形圖（或稱箱須圖）是標準的統計視覺化工具。透過將連續數據總結為五個關鍵數字——最小值、第一四分位數（Q1）、中位數（Q2）、第三四分位數（Q3）和最大值——箱形圖能立即揭示偏態、變異性以及極端異常值而無需在螢幕上堆疊原始數據造成混亂。

箱形圖的運作原理

在 Apache ECharts 中，統計箱體是透過type: 'boxplot'來繪製。每個資料集項目都期望包含一個五元素的數值陣列，依序為[最小值, Q1, 中位數, Q3, 最大值]。ECharts 也內建了資料預處理工具，可直接從原始數值計算這些統計邊界。

1. 基本設定

要建立基本的箱形圖，請將類別對應至 X 軸，並在系列資料中提供計算好的五數總結陣列：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
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]
            ]
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

進階結構技術

您可以疊加異常值散點圖，或為名稱較長的類別建立水平箱形圖。

1. 水平箱形圖佈局

設定yAxis為類別尺度，並設定xAxis為數值尺度，以水平翻轉箱形圖，提升標籤可讀性：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
option = {
    tooltip: {
        trigger: 'item',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'category',
        data: ['伺服器 Alpha', '伺服器 Beta', '伺服器 Gamma']
    },
    series: [
        {
            name: '延遲時間 (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
            }
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

微調佈局與樣式

自訂方框顏色、須線寬度和中位數線格式可提升複雜儀表板佈局之間的視覺區分度。

1. 自訂方框填充與異常值樣式

設定方框邊框、填充顏色和須線屬性，以符合您的介面設計：

ECharts


在 VPasCode 中編輯 ECharts
ECharts Edit ECharts in VPasCode 
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]
            ]
        }
    ]
};
Edit ECharts in VPasCode



在 VPasCode 中編輯 ECharts

 

戰略最佳實務

  • 雙重確認摘要順序：請確認陣列值遵循嚴格的順序：[最小值, Q1, 中位數, Q3, 最大值]錯誤的順序將導致渲染錯誤。
  • 使用散點系列疊加異常值： 使用第二個散點系列疊加在箱形圖之上，以將極端統計異常值顯示為單獨的資料點。
  • 調整網格內邊距： 確保足夠的grid.bottom或grid.left內邊距，以避免長的類別名稱與須線衝突。
返回頂端