echarts學(xué)習(xí)筆記之箱線圖的分析與繪制詳解
一、箱線圖 Box-plot
箱線圖(Boxplot)也稱箱須圖(Box-whisker Plot),它是用一組數(shù)據(jù)中的最小值、第一四分位數(shù)、中位數(shù)、第三四分位數(shù)和最大值來反映數(shù)據(jù)分布的中心位置和散布范圍,可以粗略地看出數(shù)據(jù)是否具有對(duì)稱性。通過將多組數(shù)據(jù)的箱線圖畫在同一坐標(biāo)上,則可以清晰地顯示各組數(shù)據(jù)的分布差異,為發(fā)現(xiàn)問題、改進(jìn)流程提供線索。
什么是四分位數(shù)
箱線圖需要用到統(tǒng)計(jì)學(xué)的四分位數(shù)(Quartile)的概念,所謂四分位數(shù),就是把組中所有數(shù)據(jù)由小到大排列并分成四等份,處于三個(gè)分割點(diǎn)位置的數(shù)字就是四分位數(shù)。
- 第一四分位數(shù)(Q1),又稱“較小四分位數(shù)”或“下四分位數(shù)”,等于該樣本中所有數(shù)值由小到大排列后第25%的數(shù)字。
- 第二四分位數(shù)(Q2),又稱“中位數(shù)”,等于該樣本中所有數(shù)值由小到大排列后第50%的數(shù)字。
- 第三四分位數(shù)(Q3),又稱“較大四分位數(shù)”或“上四分位數(shù)”,等于該樣本中所有數(shù)值由小到大排列后第75%的數(shù)字。
- 第三四分位數(shù)與第一四分位數(shù)的差距又稱四分位間距(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ù)確定起來稍微繁瑣一點(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ù)、上邊界、下邊界,來將數(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ù)說明:
1.Q1表示下四分位數(shù),即25%分位數(shù);Q3為上四分位數(shù),即75%分位數(shù);IQR表示上下四分位差,系數(shù)1.5是一種經(jīng)過大量分析和經(jīng)驗(yàn)積累起來的標(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ì)算通過調(diào)用echarts.dataTool.prepareBoxplotData()來完成。
說到這里,有一個(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)比較簡單,一個(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)的箱線圖?
再來看一下echart官網(wǎng)給出栗子數(shù)據(jù),是通過三個(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));
}
通過在控制臺(tái)console.log(data) , console.log(seriesData) , console.log(cate) ,
可以看出外層的循環(huán)是echarts.dataTool.prepareBoxplotData()執(zhí)行的次數(shù)=5,可以理解為每個(gè)樣本有5類元素。內(nèi)部的循環(huán)表示有18個(gè)樣本,一類元素的樣本數(shù)據(jù)有100條。
所以要實(shí)現(xiàn)的性別基因表的數(shù)據(jù)結(jié)構(gòu)應(yīng)該是:

弄清楚數(shù)據(jù)結(jié)構(gòu)剩下的繪圖操作就是按部就班了,完整代碼我已提交到github。
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- 在Vue中使用echarts的實(shí)例代碼(3種圖)
- jQuery插件echarts設(shè)置折線圖中折線線條顏色和折線點(diǎn)顏色的方法
- jQuery插件Echarts實(shí)現(xiàn)的漸變色柱狀圖
- echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
- jQuery插件echarts實(shí)現(xiàn)的多柱子柱狀圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
- jQuery插件echarts實(shí)現(xiàn)的單折線圖效果示例【附demo源碼下載】
- Echarts動(dòng)態(tài)加載多條折線圖的實(shí)現(xiàn)代碼
- jQuery插件echarts實(shí)現(xiàn)的循環(huán)生成圖效果示例【附demo源碼下載】
- 詳解python 利用echarts畫地圖(熱力圖)(世界地圖,省市地圖,區(qū)縣地圖)
- JavaScript使用百度ECharts插件繪制餅圖操作示例
相關(guān)文章
基于JavaScript實(shí)現(xiàn)一定時(shí)間后去執(zhí)行一個(gè)函數(shù)
在實(shí)際需要中可能需要規(guī)定在指定的時(shí)間之后再去執(zhí)行一個(gè)函數(shù)以達(dá)成期望的目的,這也就是一個(gè)定時(shí)器效果,本文給大家介紹基于JavaScript實(shí)現(xiàn)一定時(shí)間后去執(zhí)行一個(gè)函數(shù)的相關(guān)知識(shí),感興趣的朋友一起學(xué)習(xí)吧2015-12-12
JavaScript代碼判斷點(diǎn)擊第幾個(gè)按鈕
javascript點(diǎn)擊按鈕需求,在項(xiàng)目開發(fā)過程中經(jīng)常遇到,本文通過一段代碼給大家分享javascript代碼判斷點(diǎn)擊第幾個(gè)按鈕,對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
el-input 標(biāo)簽中密碼的顯示和隱藏功能的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了el-input 標(biāo)簽中密碼的顯示和隱藏 ,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
利用JavaScript實(shí)現(xiàn)防抖節(jié)流函數(shù)的示例代碼
在開發(fā)中我們經(jīng)常會(huì)遇到一些高頻操作,比如:鼠標(biāo)移動(dòng),滑動(dòng)窗口,鍵盤輸入等等,節(jié)流和防抖就是對(duì)此類事件進(jìn)行優(yōu)化,降低觸發(fā)的頻率,以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個(gè)讓面試官拍大腿的防抖節(jié)流函數(shù),需要的可以參考一下2022-08-08
函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口
這篇文章主要介紹了函數(shù)window.open實(shí)現(xiàn)關(guān)閉所有的子窗口的相關(guān)資料,需要的朋友可以參考下。2015-08-08
javascript實(shí)現(xiàn)切換td中的值
這篇文章主要介紹了javascript實(shí)現(xiàn)切換td中的值的方法,需要的朋友可以參考下2014-12-12
javascript中call,apply,bind函數(shù)用法示例
這篇文章主要介紹了javascript中call,apply,bind函數(shù)用法,結(jié)合實(shí)例形式分析了call,apply,bind函數(shù)的功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12

