echarts中箱線圖怎么繪制

這篇文章給大家分享的是有關echarts中箱線圖怎么繪制的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、箱線圖 Box-plot

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

什么是四分位數

箱線圖需要用到統計學的四分位數（Quartile）的概念，所謂四分位數，就是把組中所有數據由小到大排列并分成四等份，處于三個分割點位置的數字就是四分位數。

• 第一四分位數（Q1），又稱“較小四分位數”或“下四分位數”，等于該樣本中所有數值由小到大排列后第25%的數字。

• 第二四分位數（Q2），又稱“中位數”，等于該樣本中所有數值由小到大排列后第50%的數字。

• 第三四分位數（Q3），又稱“較大四分位數”或“上四分位數”，等于該樣本中所有數值由小到大排列后第75%的數字。

• 第三四分位數與第一四分位數的差距又稱四分位間距（InterQuartile Range，IQR）。

計算四分位數首先要確定Q1、Q2、Q3的位置（n表示數字的總個數）：

• Q1的位置=（n+1）/4

• Q2的位置=（n+1）/2

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

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

• Q1的位置=（11+1）/4=3，該位置的數字是15。

• Q2的位置=（11+1）/2=6，該位置的數字是40。

• Q3的位置=3（11+1）/4=9，該位置的數字是45。

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

• Q1的位置=（6+1）/4=1.75

• Q2的位置=（6+1）/2=3.5

• Q3的位置=3（6+1）/4=5.25

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

同理，Q1、Q3的計算結果如下：

• Q1 = 8+（17-8）×0.75=14.75

• Q3 = 42+（44-42）×0.25=42.5

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

• 0，返回最小值；

• 1，返回第一個四分位數；

• 2，返回第二個四分位數，即中位數；

• 3，返回第三個四分位數；

• 4，返回最大值。

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

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

上下邊界的計算公式是：

UpperLimit=Q3+1.5IQR=75%分位數+（75%分位數-25%分位數）1.5

LowerLimit=Q1－1.5IQR=25%分位數-（75%分位數-25%分位數）1.5

參數說明：

      1.Q1表示下四分位數，即25%分位數；Q3為上四分位數，即75%分位數；IQR表示上下四分位差，系數1.5是一種經過大量分析和經驗積累起來的標準，一般情況下不做調整。

      2.分位數的參數可根據具體預警結果調整：25%和75%，是比較靈敏的條件，在這種條件下，多達25%的數據可以變得任意遠而不會很大地擾動四分位。具體業務中可結合擬合結果自行調整為其他分位

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

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

dataTool.js可以到github上下載。

二、echarts箱線圖示例

echart官網給出的箱線圖示例有兩種。

一種是單值對應（樣本元素有一組對應的值數據）：

另一種是多值對應（樣本元素有多個對應的值數據）：

三、數據結構分析

1.單值對應

單值對應的數據結構比較簡單，一個樣本信息的數據存儲到對應的一個數組里，這些數組又存儲在一個大數組里。然后用echarts.dataTool.prepareBoxplotData()處理這個大數組。

2.多值對應

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

兩種性別的三種基因含量表。（數據純虛構）

那要提供什么樣的數據才能使用echart生成對應的箱線圖？

再來看一下echart官網給出栗子數據，是通過三個for循環隨機生成的。

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) ,

可以看出外層的循環是echarts.dataTool.prepareBoxplotData()執行的次數=5，可以理解為每個樣本有5類元素。內部的循環表示有18個樣本，一類元素的樣本數據有100條。

所以要實現的性別基因表的數據結構應該是：

弄清楚數據結構剩下的繪圖操作就是按部就班了，完整代碼我已提交到github。

感謝各位的閱讀！關于“echarts中箱線圖怎么繪制”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！