一起来玩echarts系列（一）------箱线图的分析与绘制

#一、箱线图 Box-plot

箱线图一般被用作显示数据分散情况。具体是计算一组数据的`中位数`、`25%分位数`、`75%分位数`、`上边界`、`下边界`，来将数据从大到小排列，直观展示数据整体的分布情况。
![](http://s2.sinaimg.cn/middle/5fe50611gcabbb57b3a71&690)
大部分正常数据在箱体中，上下边界之外的就是异常数据了。

上下边界的计算公式是：

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官网给出的**[箱线图示例](http://echarts.baidu.com/demo.html#boxplot-light-velocity)**有两种。

一种是单值对应（样本元素有一组对应的值数据）：

另一种是多值对应（样本元素有多个对应的值数据）：

#三、数据结构分析

###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