一、箱線圖 Box-plot

箱線圖（Boxplot）也稱(chēng)箱須圖（Box-whisker Plot），它是用一組數(shù)據(jù)中的最小值、第一四分位數(shù)、中位數(shù)、第三四分位數(shù)和最大值來(lái)反映數(shù)據(jù)分布的中心位置和散布范圍，可以粗略地看出數(shù)據(jù)是否具有對(duì)稱(chēng)性。通過(guò)將多組數(shù)據(jù)的箱線圖畫(huà)在同一坐標(biāo)上，則可以清晰地顯示各組數(shù)據(jù)的分布差異，為發(fā)現(xiàn)問(wèn)題、改進(jìn)流程提供線索。

什么是四分位數(shù)

箱線圖需要用到統(tǒng)計(jì)學(xué)的四分位數(shù)（Quartile）的概念，所謂四分位數(shù)，就是把組中所有數(shù)據(jù)由小到大排列并分成四等份，處于三個(gè)分割點(diǎn)位置的數(shù)字就是四分位數(shù)。

• 第一四分位數(shù)（Q1），又稱(chēng)“較小四分位數(shù)”或“下四分位數(shù)”，等于該樣本中所有數(shù)值由小到大排列后第25%的數(shù)字。
• 第二四分位數(shù)（Q2），又稱(chēng)“中位數(shù)”，等于該樣本中所有數(shù)值由小到大排列后第50%的數(shù)字。
• 第三四分位數(shù)（Q3），又稱(chēng)“較大四分位數(shù)”或“上四分位數(shù)”，等于該樣本中所有數(shù)值由小到大排列后第75%的數(shù)字。
• 第三四分位數(shù)與第一四分位數(shù)的差距又稱(chēng)四分位間距（InterQuartile Range，IQR）。

計(jì)算四分位數(shù)首先要確定Q1、Q2、Q3的位置（n表示數(shù)字的總個(gè)數(shù)）：

• Q1的位置=（n+1）/4
• Q2的位置=（n+1）/2
• Q3的位置=3（n+1）/4

對(duì)于數(shù)字個(gè)數(shù)為奇數(shù)的，其四分位數(shù)比較容易確定。例如，數(shù)字“5、47、48、15、42、41、7、39、45、40、35”共有11項(xiàng)，由小到大排列的結(jié)果為“5、7、15、35、39、40、41、42、45、47、48”，計(jì)算結(jié)果如下：

• Q1的位置=（11+1）/4=3，該位置的數(shù)字是15。
• Q2的位置=（11+1）/2=6，該位置的數(shù)字是40。
• Q3的位置=3（11+1）/4=9，該位置的數(shù)字是45。

而對(duì)于數(shù)字個(gè)數(shù)為偶數(shù)的，其四分位數(shù)確定起來(lái)稍微繁瑣一點(diǎn)。例如，數(shù)字“8、17、38、39、42、44”共有6項(xiàng)，位置計(jì)算結(jié)果如下：

• Q1的位置=（6+1）/4=1.75
• Q2的位置=（6+1）/2=3.5
• Q3的位置=3（6+1）/4=5.25

這時(shí)的數(shù)字以數(shù)據(jù)連續(xù)為前提，由所確定位置的前后兩個(gè)數(shù)字共同確定。例如，Q2的位置為3.5，則由第3個(gè)數(shù)字38和第4個(gè)數(shù)字39共同確定，計(jì)算方法是：38+（39-38）×3.5的小數(shù)部分，即38+1×0.5=38.5。該結(jié)果實(shí)際上是38和39的平均數(shù)。

同理，Q1、Q3的計(jì)算結(jié)果如下：

• Q1 = 8+（17-8）×0.75=14.75
• Q3 = 42+（44-42）×0.25=42.5

Excel為計(jì)算四分位數(shù)提供了QUARTILE(array,quart)函數(shù)，其中array參數(shù)用于指定要計(jì)算四分位數(shù)值的數(shù)組或數(shù)值型單元格區(qū)域，quart指定返回哪一個(gè)四分位值，可用值如下：

• 0，返回最小值；
• 1，返回第一個(gè)四分位數(shù)；
• 2，返回第二個(gè)四分位數(shù)，即中位數(shù)；
• 3，返回第三個(gè)四分位數(shù)；
• 4，返回最大值。

箱線圖一般被用作顯示數(shù)據(jù)分散情況。具體是計(jì)算一組數(shù)據(jù)的中位數(shù)、25%分位數(shù)、75%分位數(shù)、上邊界、下邊界，來(lái)將數(shù)據(jù)從大到小排列，直觀展示數(shù)據(jù)整體的分布情況。

大部分正常數(shù)據(jù)在箱體中，上下邊界之外的就是異常數(shù)據(jù)了。

上下邊界的計(jì)算公式是：

UpperLimit=Q3+1.5IQR=75%分位數(shù)+（75%分位數(shù)-25%分位數(shù)）1.5

LowerLimit=Q1－1.5IQR=25%分位數(shù)-（75%分位數(shù)-25%分位數(shù)）1.5

參數(shù)說(shuō)明：

      1.Q1表示下四分位數(shù)，即25%分位數(shù)；Q3為上四分位數(shù)，即75%分位數(shù)；IQR表示上下四分位差，系數(shù)1.5是一種經(jīng)過(guò)大量分析和經(jīng)驗(yàn)積累起來(lái)的標(biāo)準(zhǔn)，一般情況下不做調(diào)整。

      2.分位數(shù)的參數(shù)可根據(jù)具體預(yù)警結(jié)果調(diào)整：25%和75%，是比較靈敏的條件，在這種條件下，多達(dá)25%的數(shù)據(jù)可以變得任意遠(yuǎn)而不會(huì)很大地?cái)_動(dòng)四分位。具體業(yè)務(wù)中可結(jié)合擬合結(jié)果自行調(diào)整為其他分位

使用echarts時(shí)，這些計(jì)算通過(guò)調(diào)用echarts.dataTool.prepareBoxplotData()來(lái)完成。

說(shuō)到這里，有一個(gè)預(yù)警，繪制箱線圖除了要下載echart.js之外，還需要引入dataTool.js，否則瀏覽器會(huì)報(bào)錯(cuò)：Uncaught TypeError: Cannot read property 'prepareBoxplotData' of undefined(…) 。

dataTool.js可以到github上下載。

二、echarts箱線圖示例

echart官網(wǎng)給出的箱線圖示例有兩種。

一種是單值對(duì)應(yīng)（樣本元素有一組對(duì)應(yīng)的值數(shù)據(jù)）：

另一種是多值對(duì)應(yīng)（樣本元素有多個(gè)對(duì)應(yīng)的值數(shù)據(jù)）：

三、數(shù)據(jù)結(jié)構(gòu)分析

1.單值對(duì)應(yīng)

單值對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)比較簡(jiǎn)單，一個(gè)樣本信息的數(shù)據(jù)存儲(chǔ)到對(duì)應(yīng)的一個(gè)數(shù)組里，這些數(shù)組又存儲(chǔ)在一個(gè)大數(shù)組里。然后用echarts.dataTool.prepareBoxplotData()處理這個(gè)大數(shù)組。

2.多值對(duì)應(yīng)

舉一個(gè)栗子：線上地址在這里

兩種性別的三種基因含量表。（數(shù)據(jù)純虛構(gòu)）

那要提供什么樣的數(shù)據(jù)才能使用echart生成對(duì)應(yīng)的箱線圖？

再來(lái)看一下echart官網(wǎng)給出栗子數(shù)據(jù)，是通過(guò)三個(gè)for循環(huán)隨機(jī)生成的。

data = [];
for (var seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
 var seriesData = [];
 for (var i = 0; i < 18; i++) {
 var cate = [];
 for (var j = 0; j < 100; j++) {
  cate.push(Math.random() * 200);
 }
 seriesData.push(cate);
 }
 data.push(echarts.dataTool.prepareBoxplotData(seriesData));
}

通過(guò)在控制臺(tái)console.log(data) , console.log(seriesData) , console.log(cate) ,

可以看出外層的循環(huán)是echarts.dataTool.prepareBoxplotData()執(zhí)行的次數(shù)=5，可以理解為每個(gè)樣本有5類(lèi)元素。內(nèi)部的循環(huán)表示有18個(gè)樣本，一類(lèi)元素的樣本數(shù)據(jù)有100條。

所以要實(shí)現(xiàn)的性別基因表的數(shù)據(jù)結(jié)構(gòu)應(yīng)該是：

弄清楚數(shù)據(jù)結(jié)構(gòu)剩下的繪圖操作就是按部就班了，完整代碼我已提交到github。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論