欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts學(xué)習(xí)筆記之箱線圖的分析與繪制詳解

 更新時間:2017年11月22日 11:16:16   作者:謙一  
最近在學(xué)習(xí)echarts,所以下面這篇文章主要給大家介紹了關(guān)于echarts學(xué)習(xí)筆記之箱線圖的分析與繪制的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。

一、箱線圖 Box-plot

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

什么是四分位數(shù)

箱線圖需要用到統(tǒng)計學(xué)的四分位數(shù)(Quartile)的概念,所謂四分位數(shù),就是把組中所有數(shù)據(jù)由小到大排列并分成四等份,處于三個分割點位置的數(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)。

計算四分位數(shù)首先要確定Q1、Q2、Q3的位置(n表示數(shù)字的總個數(shù)):

  • Q1的位置=(n+1)/4
  • Q2的位置=(n+1)/2
  • Q3的位置=3(n+1)/4

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

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

而對于數(shù)字個數(shù)為偶數(shù)的,其四分位數(shù)確定起來稍微繁瑣一點。例如,數(shù)字“8、17、38、39、42、44”共有6項,位置計算結(jié)果如下:

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

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

同理,Q1、Q3的計算結(jié)果如下:

  • Q1 = 8+(17-8)×0.75=14.75
  • Q3 = 42+(44-42)×0.25=42.5

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

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

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

大部分正常數(shù)據(jù)在箱體中,上下邊界之外的就是異常數(shù)據(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)驗積累起來的標(biāo)準(zhǔn),一般情況下不做調(diào)整。

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

使用echarts時,這些計算通過調(diào)用echarts.dataTool.prepareBoxplotData()來完成。

說到這里,有一個預(yù)警,繪制箱線圖除了要下載echart.js之外,還需要引入dataTool.js,否則瀏覽器會報錯:Uncaught TypeError: Cannot read property 'prepareBoxplotData' of undefined(…) 。

dataTool.js可以到github上下載。

二、echarts箱線圖示例

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

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

另一種是多值對應(yīng)(樣本元素有多個對應(yīng)的值數(shù)據(jù)):

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

1.單值對應(yīng)

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

2.多值對應(yīng)

舉一個栗子:線上地址在這里

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

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

再來看一下echart官網(wǎng)給出栗子數(shù)據(jù),是通過三個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));
}

通過在控制臺console.log(data) , console.log(seriesData) , console.log(cate) ,

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

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

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

總結(jié)

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

相關(guān)文章

  • ES6 Map結(jié)構(gòu)的應(yīng)用實例分析

    ES6 Map結(jié)構(gòu)的應(yīng)用實例分析

    這篇文章主要介紹了ES6 Map結(jié)構(gòu)的應(yīng)用,結(jié)合實例形式分析了ES6中map鍵值對hash結(jié)構(gòu)相關(guān)定義、獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • javascript實現(xiàn)的全國省市縣無刷新多級關(guān)聯(lián)菜單效果代碼

    javascript實現(xiàn)的全國省市縣無刷新多級關(guān)聯(lián)菜單效果代碼

    這篇文章主要介紹了javascript實現(xiàn)的全國省市縣無刷新多級關(guān)聯(lián)菜單效果代碼,涉及javascript針對頁面元素的遍歷與屬性的動態(tài)操作技巧,需要的朋友可以參考下
    2016-08-08
  • JavaScript 事件對內(nèi)存和性能的影響

    JavaScript 事件對內(nèi)存和性能的影響

    本文主要介紹了JavaScript 事件對內(nèi)存和性能的影響。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • JS實現(xiàn)京東放大鏡效果

    JS實現(xiàn)京東放大鏡效果

    這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)京東放大鏡效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 一個js過濾空格的小函數(shù)

    一個js過濾空格的小函數(shù)

    過濾空格,尤其是在一些注冊頁面比較實用,可以用js在客戶端將空格過濾掉,減輕服務(wù)器端的負(fù)擔(dān),下面是實現(xiàn)函數(shù)
    2014-10-10
  • javascript下載文件5種方式實例詳解

    javascript下載文件5種方式實例詳解

    在Web開發(fā)中文件下載功能是一個非常常見的功能,這篇文章主要給大家介紹了關(guān)于javascript下載文件5種方式的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • js實現(xiàn)背景圖自適應(yīng)窗口大小

    js實現(xiàn)背景圖自適應(yīng)窗口大小

    本文分享了背景圖自適應(yīng)窗口大小的實例代碼,具有一定的參考作用。下面跟著小編一起來看下吧
    2017-01-01
  • jsonp跨域請求詳解

    jsonp跨域請求詳解

    這篇文章主要為大家詳細(xì)介紹了jsonp跨域請求的相關(guān)資料,激活了所有接口支持瀏覽器跨域請求的封裝,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • 使用JavaScript解析URL的方法示例

    使用JavaScript解析URL的方法示例

    這篇文章主要給大家介紹了關(guān)于如何使用JavaScript解析URL的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-03-03
  • javascript實現(xiàn)計算器功能

    javascript實現(xiàn)計算器功能

    這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)計算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-03-03

最新評論