一、箱線圖 Box plot 箱線圖一般被用作顯示數據分散情況。具體是計算一組數據的 、`25%分位數 75%分位數 上邊界 下邊界`，來將數據從大到小排列，直觀展示數據整體的分佈情況。 大部分正常數據在箱體中，上下邊界之外的就是異常數據了。 上下邊界的計算公式是： UpperLimit=Q3+1. ...
一、箱線圖 Box-plot
箱線圖一般被用作顯示數據分散情況。具體是計算一組數據的中位數、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。
====over====
